Vue组件化开发
- 组件化开发思维
- 组件祖册
- Vue调试工具用法
- 组件间数据交互
- 组件插槽
- 基于组件的案例
组件化的开发思维
编程中的组件化开发思维
一个组件就是一个性能，多个组件组成一个残缺的APP，抽取一个组件并不会影响其它组件的运行。组件化标准: Web Components
官网：https://developer.mozilla.org...
组件的注册
组件的注册
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue组件的应用</title></head><body> <div id="app"> <button-count></button-count> <button-count></button-count> <button-count></button-count> <button-count></button-count> </div></body><script src="../vue.js"></script><script> Vue.component('button-count', { data() { return { count: '0', } }, template: `<button @click='count++'>点击{{count}}次</button>` }) let vm = new Vue({ el: "#app", data: { } })</script></html>Vue组件注册之注意事项
注意事项
- dta必须是一个函数
- 组件模板内容必须是单个根元素
- 组件模板内容能够是模板字符串（ES6语法）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue组件的注意事项</title></head><body> <div id="app"> <button-count></button-count> <button-count></button-count> <button-count></button-count> <button-count></button-count> </div></body><script src="../vue.js"></script><script> Vue.component('button-count', { //data必须是一个函数 data() { return { count: '0', } }, //组件模板的内容必须是单个根元素 且能够应用模板字符串语法 template: ` <div> <button @click='count++'>点击{{count}}次</button> <button>按钮</button> </div> ` }) let vm = new Vue({ el: "#app", data: { } })</script></html>组件的命名形式
注意事项
- 驼峰形式的命名能在组件注册的字符串模板中应用，但不能在标签中的模板字符串应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue组件的命名</title></head><body> <div id="app"> <button-count></button-count> <button-count></button-count> <button-count></button-count> <button-count></button-count> <myComponent></myComponent> </div></body><script src="../vue.js"></script><script> Vue.component('myComponent', { data() { return { msg: 'hello Word' } }, template: `<div>{{msg}}</div>` }) Vue.component('button-count', { //data必须是一个函数 data() { return { count: '0', } }, // 采纳驼峰式命名的形式能够在组件定义中的模板字符串应用 template: ` <div> <button @click='count++'>点击{{count}}次</button> <button>按钮</button> <myComponent></myComponent> </div> ` }) let vm = new Vue({ el: "#app", data: { } })</script></html>Vue之部分自定义组件
应用components属性能够部分自定义组件。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"> <hello-word></hello-word> <hello-vue></hello-Vue> </div></body><script src='../vue.js'></script><script> let helloWord = { data() { return { msg: 'hello Word' } }, template: `<div>{{msg}}</div>` }; let helloVue = { data() { return { msg: 'hello Vue' } }, template: `<div>{{msg}}</div>` }; let vm = new Vue({ el: "#app", data() { return { } }, // 部分自定义组件 components: { 'hello-word': helloWord, 'hello-vue': helloVue } })</script></html>Vue之调试工具的应用
组件间数据交互
子组件向父组件传递数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="app"> <div>{{value}}</div> <menu-item v-bind:title='title' v-bind:value='value'></menu-item> </div></body><script src="../vue.js"></script><script> // 子组件向父组件传值的根本应用 Vue.component('menu-item', { props: ['title', 'value'], data() { return { msg: "子组件自身的内容" } }, template: `<div>{{msg +'---'+title+'---'+value}}</div>` }) let vm = new Vue({ el: "#app", data() { return { value: "父组件的内容", title: '动静绑定属性' } }, })</script></html>