vue组件传值

1.props属性名规则

父组件通过props向子组件传递数据

（1）在props中使用驼峰形式，模板中需要使用短横线的形式

（2）字符串形式的模板中没有这个限制

e.g:

Vue..component('menu-item',{

//在js中是驼峰形式

props:[menuTitle],

template:<div>{{ menuTitle }}</div>

})

<!--在html中的短横线方式的-->

<menu-titlte :menu-titel=“你好”></menu-title>

ps：‘ :menu-titel=“你好”’这里如果加冒号就是原始数据，不加里面的值就是字符串

2.props属性值类型

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

3.子组件向父组件传值

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

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

e.g: <button v-on:click='$emit("enlarge-text")'>扩大字体</button>

（2）父组件监听子组件事件

e.g: <menu-item v-on:enlarge-text="fontSize += 0.1"></menu-item>

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

在子组件中写数据，父组件中用$event即可传递

5.非父子组件间传值

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

var eventAAA = new Vue()

（2）监听事件与销毁事件

eventAAA.$on('add-todo',addToDo)

eventAAA.$off('add-todo')

（3）触发事件

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