VIP20/13_Vue/day-3/code/vue-props/src/App.vue

<template>
  <div id="app">
    <h3>我是App组件</h3>
    <!-- 组件渲染 时 和 html标签的定义 是 一样的 -->
    <MyCounter />
    <!-- 给MyParent子组件传递数据 -->
    <!-- 父组件给子组件传递数据 第1步： 在渲染组件时 给其绑定一个自定义属性。注意属性名字 要遵循html规范：不支持驼峰命名，如果包含多个单词 就使用 短横线分隔 （kebab-case）-->
    <!-- <MyParent :d="toP" /> -->
    <MyParent :my-data="toP" />
  </div>
</template>

<script>
// 1 先将子组件 引入 当前模块中
import MyCounter from './components/MyCounter.vue';

import MyParent from './components/MyParent.vue';

export default {
  name: 'App',
  // 2 使用下面属性 给 组件 添加/注册 子组件
  components: {
    // MyCounter: MyCounter
    MyCounter,
    MyParent,
  },
  data() {
    return {
      toP: 'App 给 Parent组件的数据',
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>