vue——父组件向子组件传递数据

看例子：   //注册一个全局组件，组件标签名为child
    Vue.component('child', {
        props: ['msg'],    //接收父组件传递的数据
        template: '<h3>{{msg}}</h3>
                    <span>{{message}}</span>',
        data(){return {message: 'sb'};},
    });使用child组件：<father-component>
    <child msg="hehe!"></child>
</father-component>

使用child组件：

<father-component>
    <child msg="hehe!"></child>
</father-component>

作者：陈龙
链接：https://www.zhihu.com/question/53376323/answer/449678994
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. 数据的使用 

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

2. 传递动态或者静态数据

传递静态或动态 Prop
像这样，你已经知道了可以像这样给 prop 传入一个静态的值：

<blog-post title="My journey with Vue"></blog-post>
你也知道 prop 可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。