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

第三周学习内容整理

组件

3、父组件向子组件传值

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

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

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

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

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

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

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

4、子组件向父组件传值

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

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

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

<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>

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

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

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

<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

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: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})

插槽内容

<alert-box>Something bad happened.</alert-box>

• 具名插槽用法
  插槽定义

<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>

插槽内容

<base-layout>
<h1 slot="header">标题内容</h1>
<p>主要内容1</p>
<p>主要内容2</p>
<p slot="footer">底部内容</p>
</base-layout>

• 作用域插槽

插槽定义

<ul>
<li v-for= "item in list" v-bind:key= "item.id" >
<slot v-bind:item="item">
{{item.name}}
</slot>
</li>
</ul>

插槽内容

<fruit-list v-bind:list= "list">
<template slot-scope="slotProps">
<strong v-if="slotProps.item.current">
{{ slotProps.item.text }}
</strong>
</template>
</fruit-list>