美文网首页
vue 克隆节点及同时监听2个属性技巧

vue 克隆节点及同时监听2个属性技巧

作者: 0说 | 来源:发表于2023-02-02 11:12 被阅读0次
<div id="app">
    <div @click="change">666aaaa{{ test.name }}</div>
    <fncomp :vnode="vnode"></fncomp>
 </div>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      test: {
        name: 12,
        age: 20,
        arr: [1, {a: 'a'}]
      },
      vnode: 123
    },
    components: {
      fncomp: {
        functional: true, // 函数式组件
        render(h, ctx) {
          return ctx.props.vnode
        }
      }
    },
    methods: {
      change() {
        console.log(this._vnode)
        this.vnode = this._vnode.children[0]
      }
    },
    computed: {
      fullTest({ test }) {
        return test.name + test.age
      }
    },
    watch: {
      // 要监听2个值有没有变化可以在 computed 里定义一个变量 这里做监听
      fullTest(val) {
        console.log(val)
      }
    }
  })
  console.log(vm)
</script>

相关文章

  • vue 同时监听多个值的变化

    使用computed 和watch来同时监听多个属性值。。 参考原文:vue 使用watch同时监听多个属性[ht...

  • 微信小程序之watch属性值(仿Vue)

    Vue通过监听watch属性来观测Vue实例数据的变化。 监听器的原理,将data中需监听的属性写在watch对象...

  • 轮播图

    1. cloneNode 克隆节点 cloneNode() 方法克隆所有属性以及它们的值要克隆所有的后代...

  • 36.DOM操作

    内部插入 外部插入 删除节点 克隆/替换节点 属性操作 CSS操作

  • HTML dom中cloneNode()与cloneNode(t

    cloneNode() 克隆的节点复制真节点的样式,标签,属性。至于标签里的元素,事件没有复制,所以称它浅克隆。 ...

  • Vue watch

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性

  • vue全解:computed和watch

    进阶属性复习options里面有什么 会被vue监听 option.data傳給vue后呢,data会被vue监听...

  • Vue基础 | 二、Vue对象属性功能

    一、Vue的三种属性 1.1 过滤器 1.2 计算属性 1.3 监听属性 1.4 监听属性案例(各地区联动) 二、...

  • Vue监听屏幕宽度

    Vue监听屏幕宽度 首先在data中定义要监听的属性,因为watch侦听器监听的是data中的属性,不能直接监听w...

  • 利用 RACObserve 参数二控制监听范围

    正常情况下 RACObserve 键值监听为,参数一:监听属性的父节点、 参数二:准备监听的属性 然而在嵌套式的结...

网友评论

      本文标题:vue 克隆节点及同时监听2个属性技巧

      本文链接:https://www.haomeiwen.com/subject/shiwhdtx.html