Vue 组件

组件的组织

官方文档中说明： 通常一个应用会以一棵嵌套的组件树的形式来组织：

全局组件

​ 可以在任意地方使用

局部组件

​ 只在当前组件加载的时候才会加载局部组件

组件通信

父传子

通过 properties 自定义属性来通讯

​ 子组件： ​ 在子组件中声明 props 接收在父组件挂载的属性

​ 父组件： ​ 给父组件中 子组件标签 绑定自定义属性(使用v-bind)

<script> // 创建全局组件 Vue.component('Child', { template: ` <div> <h3>我是一个子组件</h3> <h4>{{ childData }}</h4> </div> `, props: ['childData'] }) // 创建局部组件 const App = { data() { return { msg:'我是父组件传进来的值' } }, template: ` <div> <Child :childData = 'msg'> </Child> </div> ` } new Vue({ el: '#app', data: { }, components: { // 挂载子组件 App } }) </script>

子传父

​ 子组件： ​ 在子组件事件函数中通过 $emit() 方法来触发父组件自定义事件

​ 父组件： ​ 给父组件中 子组件标签 绑定自定义事件

<script> Vue.component('Child', { template: ` <div> <input type="text" @input='handleInput'/> </div> `, methods: { handleInput(e) { const val = e.target.value; // 出发父组件自定义事件 this.$emit('inputHandler', val); } } }) const App = { data() { return { msg:'我是父组件传进来的值', newVal: '' } }, template: ` <div> <div class='father'> 数据：{{ newVal }} </div> <!-- 给子组件绑定自定义事件 --> <Child @inputHandler='input'> </Child> </div> `, methods: { input(newVal) { this.newVal = newVal; } } } new Vue({ el: '#app', data: { }, components: { // 挂载子组件 App } }) </script>

平行组件

​ 中央事件总线, 即 new 一个 新的 Vue对象

​ 使用 $on(funcName, func) 绑定事件

​ 使用 $emit(funcName, args...) 触发事件

其他通信

父传子(provide & inject)

​ 父组件 通过 provide(){ return{} } 提供变量

​ 子组件 通过 inject:[] 注入变量，直接使用

父传子($parent)

​ 子组件通过 this.$parent.propety 获取变量

插槽

匿名插槽

具名插槽

作用域插槽

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

// 子组件 template: ` <ul> <li v-for='item in todos' :key='item.id'> <slot :itemValue='item'></slot> {{ item.title }} </li> </ul> ` // 在子组件中绑定了 插槽prop // 并在父组件中通过 v-slot //父组件 template:` <todoList :todos='todoList'> <template v-slot='data'> <input type='checkbox' v-model='data.itemValue.isComplate'> </template> </todoList> `

​ 使用场景： ​ 原组件数据格式和引用接口不变，正常显示 ​ 新功能模块增加在原组件上

异步组件加载

以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

全局注册

可以在工厂函数中返回一个 Promise

Vue.component('async-webpack-example', // 这个动态导入会返回一个 `Promise` 对象。 () => import('./my-async-component') )

局部注册

当使用 局部注册 的时候，可以直接提供一个返回 Promise 的函数

new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })