vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式
this.$refs,this.$emit,this.$store,this.$nextTick的使用
this.$store
是vue用到了状态管理工具 vuex，就是一个保存全局数据的库。
this.$nextTick()
官方解释：
在下次 DOM 更新循环结束之后执行延迟回调。
有些操作（比如 this.$refs）需要在确保DOM被渲染完成后才能调用成功，这样就需要写在 this.$nextTick() 里面了。
this.$refs
我们在标签或者组件上定义 ref属性，比如在el-form上定义 ref="form1"，这样我们就可以使用this.$refs.form1.validate(...)来访问这个组件中定义的属性和方法，因为 Element-ui 为 el-form 定义了 validate 方法。
1、如果ref名称是动态的呢，即 this.$refs.refName ，而 refName 是个变量（比如函数的参数），此时需要使用中括号，即 this.$refs.[refName].xxx
2、如果使用的:ref="xxx"来定义的，则应该是 this.$refs.[refName][0].xxx
3、ref 是在渲染完成之后才会有的，因此在调用 this.$refs.refName.xxx 的时候要确保 refName 这个DOM已经被渲染出来了，最典型的就是 ueditor，我们需要在它被渲染出来之后才能去调用组件的 set 方法去填充编辑器的内容，但是你并不知道它什么时候能渲染成功，只能使用延迟的方式，比如 this.$nextTick(() => {})，或者 window.setTimeout(() => {}, 500)
4、同样的，由于 this.$refs 不是响应式的，如果通过它来访问标签或组件的属性，需要在 this.$nextTick(() => {}) 之内。
this.$emit
this.$emit()主要用于子组件像父组件传递事件与参数。
上面说到，父组件可以使用 this.$refs 访问子组件；这里的 this.$emit 就是子组件用来触发父组件的事件。
<body>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1;
this.$emit('increment', "参数"); // increment 是自定义的事件
}
}
});
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function (e) {
this.total += 1;
console.log(e);
}
}
})
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 同步异步存值取值实现案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue实现打卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)
这篇文章主要为大家介绍了echarts设置tootip轮播切换展示效果,vue3搭配vue-echarts粘贴即用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步2023-10-10
在Vue.js应用开发中,有时候我们需要在组件内部引入外部JavaScript库或脚本文件来增强组件的功能,本文将详细探讨如何在Vue.js项目中安全有效地引用外部JS文件,并提供一系列示例代码来帮助理解这一过程,需要的朋友可以参考下2024-09-09
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了详解如何在你的Vue项目配置vux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了vue3+ts实现一个表单组件的详细代码,确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据,需要的朋友可以参考下2024-07-07
Vue3虽然相对于Vue2很多东西都变了,但是核心的东西还是没有变,比如说状态管理、路由等,再Vue3中尤大神推荐我们使用pinia来实现状态管理,他也说pinia就是Vuex的新版本,这篇文章主要给大家介绍了关于Pinia入门学习之实现简单的用户状态管理的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue通过过滤器实现数据格式化的方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要给大家介绍了关于Vue如何在CSS中使用data定义的数据的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-05-05
最新评论