02-VUE组件化开发
一、组件注册
1.1、全局组件注册语法
Vue.component(组件名称, { data: 组件数据, template: 组件模板内容 }) Demo: // 注册一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">点击了{{ count }}次.</button>' })
1.2、组件用法
<div id="app"> <button-counter></button-counter> </div> //可多次使用 <div id="app"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>
1.3、组件注册注意事项
3.1. data必须是一个函数
分析函数与普通对象的对比
3.2. 组件模板内容必须是单个跟元素
分析演示实际的效果
3.3. 组件模板内容可以是模板字符串
模板字符串需要浏览器提供支持(ES6语法)
1.4、组件命名方式
>短横线方式
>驼峰方式
Vue.component('my-component', { /* ... */ }) Vue.component('MyComponent', { /* ... */ })
局部组件注册
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } new Vue({ el: '#app' components: { 'component-a': ComponentA, 'component-b': ComponentB, 'component-c': ComponentC, } })
二、VUE调试工具用法
三、组件间数据交互
3.1、父组件向子组件传值
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
3.2、子组件向父组件传值
1. 子组件通过自定义事件向父组件传递信息
<button v-on:click='$emit("enlarge-text") '>扩大字体</button>
2. 父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize += 0.1'></menu-item>
3. 子组件通过自定义事件向父组件传递信息
<button v-on:click='$emit("enlarge-text", 0.1) '>扩大字体</button>
4. 父组件监听子组件的事件
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
3.3、 非父子组件间传值
1. 单独的事件中心管理组件间的通信
var eventHub = new Vue()
2. 监听事件与销毁事件
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
3. 触发事件
eventHub.$emit(‘add-todo', id)
四、组件插槽
4.1、组件插槽的作用
4.2 组件插槽基本用法
1. 插槽位置
1. 插槽位置 Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> ` })
2. 插槽内容
<alert-box>Something bad happened.</alert-box>
4.3 具名插槽用法
1. 插槽定义
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div>
2. 插槽内容
<base-layout> <h1 slot="header">标题内容</h1> <p>主要内容1</p> <p>主要内容2</p> <p slot="footer">底部内容</p> </base-layout>
4.4 作用域插槽
应用场景:父组件对子组件的内容进行加工处理
1. 插槽定义
<ul> <li v-for= "item in list" v-bind:key= "item.id" > <slot v-bind:item="item"> {{item.name}} </slot> </li> </ul>
2. 插槽内容
<fruit-list v-bind:list= "list"> <template slot-scope="slotProps"> <strong v-if="slotProps.item.current"> {{ slotProps.item.text }} </strong> </template> </fruit-list>
五、基于组件的案例(购物车)