zoukankan      html  css  js  c++  java
  • $attrs和$listeners(组件传值)/自定义组件使用$listeners

    $attrs$listeners 爷孙组件传值

    情景 A组件内部嵌套B组件,B组件内部嵌套C组件
    A组件代码

      <div class="grand">
        {{count}}父组件
        {{msg}}父组件
        <child2 :count="count" :msg="msg" @handleCount="handleCount" @handleMsg="handleMsg"></child2>
      </div>
    
      data () {
        return {
          count: 1,
          msg: "123"
        }
      },
      methods: {
        handleCount (val) {
          this.count = val
        },
        handleMsg (val) {
          this.msg = val
        }
      }
    

    B组件代码

      <div class="father">
        <button @click="handleClick">子组件点击</button>
        <p>{{count}}子组件</p>
        `<child1 v-bind="$attrs" v-on="$listeners"></child1>`
      </div>
    
    export default {
      name: "father",
      inheritAttrs: false,
      props: ["count"],
      components: {
        child1: son
      },
      methods: {
        handleClick () {
          this.$emit("handleCount", 2)
        }
      }
    }
    

    C组件代码

      <div class="son">
        <div>{{msg}}</div>
        <button @click="handleClick">孙组件点击</button>
      </div>
    
    export default {
      name: "son",
      props: ["msg"],
      data () {
        return {
    
        }
      },
      methods: {
        handleClick () {
          this.$emit("handleMsg", "456")
        }
      }
    }
    

    情景自定义组件绑定原生事件使用$listeners
    父组件代码

      <base-input v-on:focus="onFocus"></base-input>
    
    import default4 from "./default4"
    export default {
      name: "default3",
      components: {
        baseInput: default4
      },
      data () {
        return {
        }
      },
      methods: {
        onFocus () {
          console.log(1111)
        }
      }
    }
    

    子组件代码

     <label>
        <input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" />
      </label>
      <!--input组件不是根元素 不能触发input的事件  -->
      <!--当input元素是根元素时 父组件使用v-on:focus.native="onFocus" .native修饰符 触发  --> 
    
    export default {
      name: "default3",
      props: ["value"],
      data () {
        return {
        }
      },
      computed: {
        inputListeners () {
          var vm = this
          var newObj = Object.assign({}, this.$listeners, {
            input: function () {
              vm.$emit('input', event.target.value)
            }
          })
          return newObj
        }
    
      },
      methods: {
      }
    }
    

    .sync 修饰符

    父组件 :page.sync="page"
    子组件 this.$emit("update:page",10)
    配合使用
    

    .sync修饰符

  • 相关阅读:
    Unity模型导入导出
    3D知识补充
    Unity. Navigation和寻路
    Unity坐标系
    Unity材质
    Unity摄像机
    Unity光照
    Unity资源管理与更新
    Unity垃圾回收
    intellij idea 的全局搜索快捷键方法
  • 原文地址:https://www.cnblogs.com/rainbowqq/p/13365414.html
Copyright © 2011-2022 走看看