$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修饰符