vue.sync修饰符与$emit(update:xxx)
Vue update xxx Sync 修饰符 Emit
2023-09-11 14:19:39 时间
。
场景:需要封装一个基于element-ui的dialog弹框;发现关闭弹框时,父组件的值没变化,导致再次出发dialog弹框,而弹框没出现。于是想办法,让父组件的attrs的值通过子组件出发改变;
想过用v-mode,但是这需要给组件多加一个属性,我想让这个组件像用element-ui一样使用,不多加一个自定义的属性,于是就查到了sync修饰符(自定义事件)
下面是一个小组件:
<template> <div> <h1>{{$attrs.visible}}</h1> <el-button type="primary" @click="changeParentBalue">改变父组件的值</el-button> </div> </template> <script> export default { methods:{ changeParentBalue(){ this.$emit("update:visible",Math.random()*10) } } } </script>
父组件调用:
<template> <div> 使用.sync修饰符,即 <h1>{{value}}</h1> <update :visible.sync="value"></update> <hr> 与不使用.sync,即 <h1>{{value1}}</h1> <update v-bind:visible="value1" v-on:update:visible="value1=$event"></update> </div> </template> <script> export default { components:{ update:() => import("@/components/update") }, data(){ return{ value:"1", value1:"1", } }, } </script>
效果:
。
相关文章
- Vue笔记:vue-router
- vue入门文章
- 解决搭建renren-fast-vue遇到的问题——sass版本问题
- vue+element 递归上传图片
- VUE - 取消默认事件
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- [Vue @Component] Switch Between Vue Components with Dynamic Components
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- [Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
- vue-router路由示例
- intx update task - IB_IBINTX_UPDATE
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Vue服务端渲染Nuxt.js实例
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- Vue中vue-i18n结合element-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 210:vue+openlayers 编辑矢量图形(放缩、平移、变形、旋转)
- 149: vue+openlayers 绘制矩形,显示首尾点和中心点坐标值,同时获取所有点的经纬度
- vue+MapboxGL:从0 到1 搭建开发环境