父传子--这个简单些，子传父绕一些

  <div id="app">
    <child-component :message="parentMessage"></child-component>
    
  </div>

  <script>
    // 注册子组件
    Vue.component('child-component', {
      template: `
        <div>
            <p>{{message}}</p>
        </div>
      `,
      props: {
        message: {
          type: String,
          required: true
        }
      }
    });

    // 创建根 Vue 实例
    new Vue({
      el: '#app',
      data: {
        parentMessage: 'Hello from the parent!'
      }
    });
  </script>

就是，定义组件child-component，和根组件挂载到vue上的div，然后根组件叫child-component组件去当儿子（子组件），通过组件名形成自定义标签来调用变成子组件，

要接受父组件传递到值，就要在子组件里定义props这个属性（props是定义在子组件中的一组属性，用于父组件向子组件传递数据。）在里面定义要接受父组件数据的属性名和接收数据的类型

props: {
        message: {
          type: String,
          required: true
        }
      }

在上面父组件调用组件child-component成自己的子组件时，就把值通过父组件自己的属性 parentMessage传递给message在子组件里props里接收就好了，然后再渲染出来

template: `
        <div>
            <p>{{message}}</p>
        </div>
      `