# day0006 **Repository Path**: yang-wanting/day0006 ## Basic Information - **Project Name**: day0006 - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-11-02 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #### vue简介: ###### 1,data: - **类型**:`Object | Function` - **限制**:组件的定义只接受 `function`。 当一个**组件**被定义,`data` 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 `data` 仍然是一个纯粹的对象,则所有的实例将**共享引用**同一个数据对象!通过提供 `data` 函数,每次创建一个新实例后,我们能够调用 `data` 函数,从而返回初始数据的一个全新副本数据对象。 如果需要,可以通过将 `vm.$data` 传入 `JSON.parse(JSON.stringify(...))` 得到深拷贝的原始数据对象。 ``` var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } } }) ``` #### 2,methods、watches、computed的意义及联系: 1.computed计算属性 计算结果会缓存,computed中的依赖项没有变化,则computed中的值就不会重新计算,只有当依赖值改变才会重新计算 ​ methods 本质区别是 computed 是可缓存的, ​ 适用场景:通过计算产生的值 ​ 2.watch 监听属性 ​ 一个值的改变 需要另一个值的改变而改变,结果不会缓存 ​ 当需要在数据变化时执行 ​ 开发场景: ​ “异步”或“开销较大”的操作时,这个方式是最有用的 3.methods 事件方法 ​ methods中都是封装好的函数,无论是否有变化,触发就会执行 、 适用场景:组件中功能的封装,逻辑处理 #### 3,mixin混入: - **参数**: - `{Object} mixin` - **用法**: 全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。**不推荐在应用代码中使用**。 #### 4,插槽的用法: 插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。 1. 在子组件中放一个占位符 2. 在父组件中给这个占位符填充内容: 具名插槽: 描述:具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。 默认插槽: 描述: 默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把 未指定插槽的填充的内容填充到默认插槽中。 作用域插槽: *描述:作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。使用方法:* 1. 1. 子组件存放一个带数据的插槽: mylist和title是子组件传给父组件的参数 ![img](http://doc.wb.local/Public/Uploads/2019-09-16/5d7f443da93dc.png) 2. 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容