一、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>
