Vue---组件传值

父传子:

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

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

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

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

    3.props属性名规则

• 在props中使用驼峰命名,html模板中需要使用短横线的形式     
• 字符串形式的模板中没有这个规则

     

     4.props属性值类型

子传父:

props传递数据原则:单向数据流

1.子组件通过自定义事件向父组件传递数据

<button @click="$emit('large-text')">扩大字体</button>

2.父组件监听子组件的事件

<menu-item @large-text="fontSize += 0.1"></menu-item>

3.子组件通过自定义事件向父组件传递信息

<button @click="$emit('large-text',0.1)">扩大字体</button>

4.父组件监听子组件事件

<menu-item @large-text="fontSize += $event"></menu-item>

非父子组件间传值

1.单独的事件中心管理组件间的通信

var hub = new Vue()

2.监听事件与销毁事件

hub.$emit('add-todo',addTodo)
hub.$off('add-todo)

3.触发事件

hub.$emit('add-todo,id)