国外网站布局,济南做网站互联网公司排名,wordpress评论关闭,房地产活动策划网站一、vue2开发中$emit 、$on 、$once 、$off 的使用 简单概述#xff1a;
1、vm.$emit(eventName,callback) 和 $on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件#xff08;并将附加参数都传给监听器回调#xff09;#xff0c;使用 $on 监听…一、vue2开发中$emit 、$on 、$once 、$off 的使用 简单概述
1、vm.$emit(eventName,callback) 和 $on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件并将附加参数都传给监听器回调使用 $on 监听该事件并调用回调函数。这两个事件方法可以结合props 属性实现父子组件双向传参。
2、vm.$once(eventName,callback) 监听一个自定义事件但是只触发一次在第一次触发之后移除监听器。
3、vm.$off([eventName,callback]) 用来移除自定义事件监听器。如果没有提供参数则移除所有的事件监听器如果只提供了事件则移除该事件所有的监听器如果同时提供了事件与回调则只移除这个回调的监听器。 demo01$emit 和$on 实现父子组件双向传参
父组件如下 templatedivdiv父组件的toCity{{toCity}}/divtrain-city showCityNameupdateCity :sendDatatoCity/train-city/div
templatescriptimport TrainCity from ./train-city;export default {name:index,components: {TrainCity},data () {return {toCity:北京}},methods:{updateCity(data){//触发子组件城市选择-选择城市的事件this.toCity data.cityname;//改变了父组件的值console.log(toCity:this.toCity)}}}
/script子组件如下 templatediv classcontainerh3这是接收到的父组件传过来的参数:{{ParentData}}/h3 br/button clicksendToParent(大连)点击此处将‘大连’发射给父组件/button/div
/templatescriptexport default {name:trainCity,props:[ParentData], // 用来接收父组件传给子组件的数据methods:{sendToParent(val) {let data {cityname: val};this.$emit(showCityName,data);//sendToParent方法触发showCityName事件并传参到监听方法}}}
/script二、vue中$root、$refs、$parent 的使用 简单概述
1、$root 可以用来获取vue的根实例比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store ),因此可以代替vuex实现状态管理
2、$parent 属性可以用来从一个子组件访问父组件的实例可以替代将数据以 prop 的方式传入子组件的方式当变更父级组件的数据的时候容易造成调试和理解难度增加
3、在子组件上使用ref特性后this.$refs 属性可以直接访问该子组件。可以代替事件$emit 和$on 的作用。使用方式是通过 ref 特性为这个子组件赋予一个 ID 引用再通过this.$refs.testId获取指定元素。注意$refs 只会在组件渲染完成之后生效并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。 demo1$root 属性获取根实例
在每个 new Vue 实例的子组件中其根实例可以通过 $root 属性进行访问。例如在这个根实例中
// Vue 根实例
new Vue({data: {foo: 1},computed: {bar: function () { /* ... */ }},methods: {baz: function () { /* ... */ }}
})
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用
// 获取根组件的数据
this.$root.foo// 写入根组件的数据
this.$root.foo 2// 访问根组件的计算属性
this.$root.bar// 调用根组件的方法
this.$root.baz() demo2$refs 属性获取子组件实例
input refinputmethods: {// 用来从父级组件聚焦输入框focus: function () {this.$refs.input.focus()}
}
