DOVE-----Vue.js框架入门（六）

第三周学习内容整理

组件

3、父组件向子组件传值

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

Vue.component(‘menu-item', {
props: ['title'],
template: '
{{ title }}
'
})

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

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

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

Vue.component(‘menu-item', {
// 在 JavaScript 中是驼峰式的
props: [‘menuTitle'],
template: '
{{ menuTitle }}
'
})

• props属性值类型
  字符串 String
  数值 Number
  布尔值 Boolean
  数组 Array
  对象 Object

4、子组件向父组件传值

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

v-on:click='$emit("enlarge-text") '>扩大字体

• 父组件监听子组件的事件

v-on:enlarge-text='fontSize += 0.1'>

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

v-on:click='$emit("enlarge-text", 0.1) '>扩大字体

• 父组件监听子组件的事件

v-on:enlarge-text='fontSize += $event'>

5、非父子组件间传值

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

var eventHub = new Vue()

• 监听事件与销毁事件

eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')

• 触发事件

eventHub.$emit(‘add-todo', id)

6、组件插槽

• 作用
  父组件向子组件传递内容
• 用法

插槽位置

Vue.component('alert-box', {
template: `
"demo-alert-box">
Error!


`
})

插槽内容

Something bad happened.

• 具名插槽用法
  插槽定义

"container">

"header">





"footer">

插槽内容

"header">标题内容
主要内容1
主要内容2
"footer">底部内容

• 作用域插槽

插槽定义

{{item.name}}

插槽内容