父子组件传参

在Vue 中新建两个组件 Father.vue和Son.vue

意思就是：
在子组件中 定义任意一个标签，然后随便写入什么内容，然后在父组件中的script 标签下导入子组件，最后在 上面 template标签里的div 标签里 用导入子组件 定义的变量 作为标签使用 ，这个时候要想让子组件中的 username 展示出来，就需要 在这个标签内进行绑定 :username=“u”, 最后 页面效果就是 欢迎你,张三

• Son.vue中

<template>
    <div>
      <p>欢迎你：{{ username }}</p>
    </div>
</template>

<script>
    export default {
        name: "Son",
      data(){
          return{

          }
      },
     props:['username']
    }
</script>

• Father.vue 中

<template>
    <div>
        <Son :username="u"></Son>
    </div>
</template>

<script>
  import Son from '@/components/Son'
    export default {
        name: "Father",
      data(){
          return{
            u:'张三'
          }
      },
      components:{
          'Son':Son,
      }
    }
</script>