组件间数据交互

Vue实例本身就是一个组件，并且是根组件

父组件向子组件传值

1.组件内部通过props接收传递过来的值

     Vue.component('menu-item',{
        props:['title'],
        template:'<div>{{title}}</div>'
})

2.父组件通过属性将值传递给子组件

 <menu-item title="来自父组件的数据"</menu-item>
 <menu-item :title="title"></menu-item>

3.props属性名规则

• 在props中使用驼峰形式，模板中需要使用短横线的形式
• 字符串形式的模板中没有这个限制

Vue.component(`menu-item`,{
    //在JavaScript中是驼峰式的
    props:['menuTitle'],
    template:'<div>{{menuTitle}}</div>'
})
<!--在html中是短横线方式的-->
<menu-item menu-title="nihao"></menu-item>

4.props属性值类型

• 字符串String
• 数值Number
• 布尔值Boolean
• 数组Array
• 对象Object

前三种是基本的数据类型，后两种是引用类型
注意：布尔值和数值类型数据来说，如果通过v-bind进行绑定的话，在子组件中就可以得到对应类型的数据，
如果不用v-bind做绑定，得到的数据都是字符串形式的内容。

组件间数据交互

原文：https://www.cnblogs.com/songsongblue/p/12172544.html