07自定义事件内容分发.md

07自定义事件内容分发 自定义事件内容分发: 在组件Vue.component中对vue实例vm里的data进行操作 JavaScript中数组的一个万能方法 let arr = [1,2,3,4,5,6,7,8]
arr.splice(startIndex, deleteNum, addItem1, addItem2, addItem3,...) 说明: 1.从startIndex开始删除deleteNum个元素后,再添加若干个元素 addItem1, addItem2, addItem3,... 2.这里添加是从删除的位置开始添加

总结:

组件和vm实例属性值的绑定

v-bind:组件props中的属性=vm实例中data中的数据 :组件props中的属性=vm实例中data中的数据

组件和vm实例事件方法的绑定

v-on:组件methods中的[removeincomponent]=vm对象的methods中定义的方法名(实参列表) @组件methods中的[removeincomponent]=vm对象的methods中定义的方法名(实参列表) methods:{ [组件中能使用的用于绑定事件(@click)的函数名eventhappenincomponent]: function (形参列表:param1,param2) { this.$emit([用于在html中绑定组件和vm实例的方法的函数名"removeincomponent"],形参列表:param1,param2); } } 组件的template中要绑定事件,指定@click或者v-on:click="eventhappenincomponent"

目的: 使得组件中的方法或函数可以操作vm实例对象中的data

步骤：

[组件内] 1 定义组件,在组件的template里绑定一个事件,调用一个组件methods中的自定义的函数 @click=[---"组件methods中的自定义的函数"---] 2 定义一个接口,用于绑定组件和vm实例methods中的函数 [---组件methods中的自定义的函数---]: function (形参列表:param1,param2) { this.$emit([===接口"removeincomponent"===],形参列表:param1,param2); } [vm实例内] 3.methods内定义一个方法操作data中的数据 methods:{ [%%%vm实例的methods中定义的函数---]:function(形参列表:param1,param2){} } [前端html内] 4.在使用组件的标签内 v-on:[===接口"removeincomponent"===]="%%%vm实例的methods中定义的函数---"

入门总结

核心: 数据驱动、组件化 优点: 借鉴了Angular的，模块化开发MVVM架构 和 React的虚拟DOM,把DOM放到内存中执行 常用属性: v-if= v-else-if= v-else= v-for= v-model=data in vm 数据的双向(View和VM)绑定 v-bind:propsItem/htmlTagAttr=data in vm 或者 :propsItem/htmlTagAttr=data in vm 数据绑定 v-on:click/eventInComponent=methods in vm 或者 @click/eventInComponent=methods in vm 事件绑定 组件化: Vue.component(组件名,{ props: 组件属性列表-需要和外部数据绑定 template: html模板-可以使用props中定义的数据-可以定义插槽供其他组件插入 methods:{ 普通方法 [可以查询vm中的数据 但是不能增删改] 特殊方法 this.$emit(方法名-需要在外部绑定,参数列表) - 用于绑定组件中需要操作vm中数据的事件 } }) 特色:vm的计算属性缓存数据 computed:{ return Date.now(); } 通信: 使用Axios.get(url).then(response=>(回调的一些列操作)