vue超级深度监听单个元素使用函数式方法

最新推荐文章于 2024-02-20 10:03:06 发布
最新推荐文章于 2024-02-20 10:03:06 发布
阅读量1.8k 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongliming_qd/article/details/122965756
版权
  • Failed watching path: “XXXXX” Watcher only accepts simple dot-delimited paths. For full control, use a function instead.
this.$watch(
      function () { // 第一个函数就是处理你要监听的属性，只要将其return出去就行
        return this.commonData.children[0].children
      },
      function (old, valold) {
      // 要执行的方法
      }
    )
来陪人家玩游戏嘛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue使用Proxy监听所有接口状态的方法实现
12-11
通常做法就是绑定在原型上一个公共方法，比如this.message(‘后台返回接口信息’)。 这样看似省力了很多其实还是很麻烦。 如果使用了proxy做一个全局代理，那么就完全不一样了。不管任何一个api都会将状态传递个这个...
Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
weixin_30770495的博客
06-19 134
先来看看官网的介绍: 官网介绍的很好理解了，也就是监听一个数据的变化，当该数据变化时执行我们的watch方法,watch选项是一个对象，键为需要观察的数据名，值为一个表达式(函数),还可以是一个对象，如果时对象可以包含如下几个属性: handler 　　;对应的函数 　　　　 ;可以带两个参数，分别是新的...
VUE3的watch监听使用
热门推荐
moxunjinmu的博客
03-02 4万+
VUE3的watch监听使用watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某些属性总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据，副作用函数，配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
【Vue3】监听器watch的使用
最新发布
owo_ovo的博客
02-20 1340
【Vue3】监听器watch的使用
vue中watch事件监听（watch使用方法·作用）
m0_57884221的博客
05-24 2308
一：基本使用--直接代码（直观） watch: { name(nv, ov) { // nv:新值，ov:旧值 console.log(nv, ov); }, }, 作用：用于侦听指定的属性值的变化，只要侦听的属性值发生了变化就会触发侦听器，进行相应事件处理 二：进阶：深度监听 <template> <div> <input type="text" v-model="username" /> &
Vue数据监听方法watch的使用
08-27
主要介绍了Vue数据监听方法watch的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE实时监听元素距离顶部高度的操作
10-15
主要介绍了VUE实时监听元素距离顶部高度的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中监听路由参数的变化及方法
12-13
getDetail()方法中会用到this.id这个参数，在同一页面切换id的值，并不会触发vue的声明周期函数。 可以添加路由监听： watch: { $route: { handler() { this.id = this.$route.query.id; this.getDetail(); //...
vue颜色选择器插件
gongliming_qd的博客
01-12 4334
样式效果 说明 以上效果是基于第三方插件二次封装得来。 默认第三方插件只有如下样式： 第三方插件源码地址： vColorPicker 使用 ： 1. 安装插件 npm install vcolorpicker -S 2. 全局注册 # main.js import vcolorpicker from 'vcolorpicker' Vue.use(vcolorpicker) 3. 基于vColorPicker二次封装子组件 ： ColorPick 子组件文档说明 传参props ： color：数据类
el-upload基于axios自定义上传formdata文件
gongliming_qd的博客
12-13 2228
使用el-upload，选中一个文件后，导入按钮消失 使用 el-upload自定义formdata格式上传文件， 组织默认提交 使用axios来进行formdata的ajax请求
vue封装组件使用插槽
gongliming_qd的博客
12-14 1857
插槽应用场景 当封装一个组件后， 内部有一些地方待定功能暴露给外界来写。 就好比于el-table中的单个表格内部可能是下拉框，或者是一些文本输入。 需要用template来嵌套使用 子组件 <template> <div> <div v-for="item in arrData" :key="item.id"> <slot name="todo" :row="item"></slot> <
element-ui二次封装(下拉菜单el-dropdown)
gongliming_qd的博客
01-08 1729
样式效果 效果1 效果2 效果一组件调用 <template> <div> <div v-for="item in tableArr" :key="item"> <Dropdown :propObj="item" @change="menuChange" :selectData="menuSelect.menuSelectData" :buttonIcon="menuSel
一行内容显示,超出用省略号,hover显示全部内容
gongliming_qd的博客
01-19 1559
样式效果 父组件调用 <Tool-tip :content="content"></Tool-tip> 子组件 <template> <el-tooltip :content="content" placement="bottom-start" effect="dark" :disabled="isDisabled"> <div class="contentnowrap" :class="{isLink: 'link-text
模仿el-popover实现自己的vue组件
gongliming_qd的博客
05-14 1419
效果 样式效果 未点击时候是这样的 点击按钮，弹出弹框，弹框是主动添加到body下的标签 拉动浏览器窗口，弹框可以自动调节显示位置 代码效果： 代码调用和 el-popover 保持一致。 使用具名插槽reference，来显示触发按钮 使用默认插槽来显示弹框 <template> <div class="clips"> <lm-popover popper-class="customClass" trigger="click"> &l
el-table中单元格自定义修改值组件封装
gongliming_qd的博客
12-24 894
样式效果 使用 html 参数说明： rows： 一行的对象 tableInEdit： 全局控制当前只能编辑一个 prop： 要修改的字段名 submit ： 点击保存，执行更新操作 <el-table-column prop="rank" label="序号" align="center"> <template slot-scope="scope"> <TableEditSingle
vue项目中使用 vue-i18n
gongliming_qd的博客
12-30 864
安装 npm install vue-i18n --save-dev main.js中导入 import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh': require('./VueI18n/language-zh'), 'en
vue 基于element的v-infinite-scroll支持无限滚动
gongliming_qd的博客
04-14 820
样式效果： 无限滚动插件 <div class="topHot" ref="topHot" v-infinite-scroll="Hotload" > // 子元素 </div> // 方法 async Hotload () { if (this.HotScrollloa
vue自定义鼠标右键组件
gongliming_qd的博客
04-21 731
全局屏蔽右键功能 App.vue mounted(){ window.addEventListener('contextmenu', (e)=>{ e.preventDefault(); }) } 右键菜单组件 <template> <div class="showRightMenu" ref="showRightMenu" > <div v-for="item in menuLi
写vue深度监听数组的方法ga
09-27
在 Vue 中，要深度监听一个数组可以使用 `Vue.set()` 或 `this.$set()` 方法来添加元素，并使用 `Vue.delete()` 或 `this.$delete()` 方法来删除元素。这样可以确保更改会被 Vue 监听到并更新视图。 以下是一个示例代码： ``` <template> <div> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <button @click="addItem">Add Item</button> </div> </template> <script> export default { data() { return { items: [] } }, methods: { addItem() { // 使用 Vue.set() 或 this.$set() 添加元素 this.$set(this.items, this.items.length, 'New Item') }, deleteItem(index) { // 使用 Vue.delete() 或 this.$delete() 删除元素 this.$delete(this.items, index) } } } </script> ``` 在添加或删除元素时，使用 `Vue.set()` 或 `this.$set()` 和 `Vue.delete()` 或 `this.$delete()` 方法可以确保更改被 Vue 监听并更新视图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值