组件二次封装继承组件的属性、方法和插槽

一、vue2.0使用方法

• 1、通过 v-on="$listeners" 接受父级传递的方法传给子组件

  <van-cell-group>
    <van-field v-model="value" label="文本" placeholder="请输入用户名" v-on="$listeners">
    </van-field>
  </van-cell-group>
  

  • $listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
• 2、通过v-bind="$attrs" 接受父级传递的属性传递给子组件

  <van-cell-group>
    <van-field v-model="value" label="文本" placeholder="请输入用户名" v-bind="$attrs">
    </van-field>
  </van-cell-group>
  

  • $attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
• 3、继承slot
  使用 $slots

  <van-cell-group>
    <van-field v-model="value" label="文本" placeholder="请输入用户名">
      <template v-for="(index, name) in $slots" :slot="name">
        <slot :name="name" />
      </template>
    </van-field>
  </van-cell-group>
  

使用完整示例

• son.vue子页面二次封装其他组件

<template>
  <div>
    <van-cell-group>
      <van-field v-model="value" label="文本" placeholder="请输入用户名" v-bind="$attrs" v-on="$listeners">
       <template v-for="(index, name) in $slots" v-slot:[name]>
          <slot :name="name"/>
        </template>
      </van-field>
    </van-cell-group>
    <div>
      {{test}}
      <slot name="sonSlot"></slot>
    </div>
  </div>
</template>
<script>
import { Field } from 'vant'
export default {
  name: 'son',
  data () {
    return {
      value: '测试数据'
    }
  },
  created () {},
  props:{
    test: {
      default: '123',
      type: String
    }
  },
  components: {
    Field
  },
  computed: {},
  mounted () {},
  methods: {},
}
</script>
<style lang='scss' scoped>
</style>

• 父级页面引用子组件

<template>
  <div id="app">
    <son :test="name" :maxlength="14" @focus="focus" :border="false">
      <p>测试测试测试</p>
      <div slot="label">左边label测试</div>
      <div slot="left-icon">
        <van-icon name="cart" />
      </div>
      <div slot="sonSlot"> 的恢复上课</div>
    </son>
  </div>
</template>
<script>
import son from './components/son'
export default {
  components: {
    son
  },
  data () {
    return {
      name: '123123'
    }
  },
  methods: {
    focus () {
      console.log('聚焦')
    }
  }
}
</script>
<style lang='scss' scoped>
</style>

二、vue3.0使用

• 1、v-bind="$attrs" 接受父级传递的方法和非prop传递的属性

$listeners对象在 Vue 3 中已被移除。现在事件监听器是 attrs 对象的一部分。

<van-field label="文本" placeholder="请输入用户名" v-bind="$attrs" />

• 2、获取slot用 $slots

$slots 用来访问被插槽分发的内容

<van-field label="文本" placeholder="请输入用户名">
 <template v-for="(index, name) in $slots" v-slot:[name]>
   <slot :name="name"></slot>
 </template>
</van-field>

vue3.0使用完整示例

• son.vue 子页面封装第三方组件

<template>
 <div>
     <van-field label="文本" placeholder="请输入用户名" v-bind="$attrs">
       <template v-for="(index, name) in $slots" v-slot:[name]>
         <slot :name="name"></slot>
       </template>
     </van-field>
   <div>
     {{msg}}
     <slot></slot>
   </div>
 </div>
</template>

<script>
export default {
 name: 'son',
 props: {
   msg: String
 },
 data () {
   return {
     value: '',
   }
 },
 mounted() {
   console.log(this.$attrs)
   console.log(this.$slots)
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

• 父级页面引用子组件

<template>
   <Son :maxlength="14" @focus="focusEvent" :msg="msgText" v-model="value">
    <template #label>左边文字测试</template>
    <template v-slot:left-icon>
      <van-icon name="like-o" />
    </template>
    <template #default>sdjkfsdf</template>
  </Son>
</template>

<script>
import Son from './components/son.vue'

export default {
  name: 'App',
  components: {
    Son
  },
  data () {
    return {
      msgText: '测试数据',
      value: 'value测试'
    }
  },
  methods: {
    focusEvent () {
      console.log('聚焦')
    }
  },
}
</script>