props接收参数有两种 1:props 2:attrs 2选1使用
父组件
<template>
<div>wedss</div>
<BaseScrollList :header="header"></BaseScrollList>
</template>
<script setup name="scrolllist">
import {
ref, reactive } from "vue";
const header = reactive(["a", "as"]);
</script>
<style lang="scss" scoped>
</style>
export default {
name: 'Demo',
props:['header'],
setup(props,context){
console.log('---setup---',props)//props接收的是父组件传输的参数 我定义了props并且接收了值才可以使用
console.log('---setup---',context)
// (定义props不接收值或者不定义则父组件传输的值保存在attrs中 否则保存在props)
console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
console.log('---setup---',context.emit) //触发自定义事件的。
return {
}
}
}
使用setup语法糖的时候获取contenxt的值
useAttrs 方法 获取 attrs 属性
useSlots 方法获取 slots 插槽
defineEmits 方法获取 emit 自定义事件
<script setup name="BaseScrollList">
import {
ref, reactive } from "vue";
import {
useAttrs, useSlots ,defineEmits } from "vue";
//按照Attrs举例子
// console.log(useAttrs().header[0], "add.header");
//上面使用了useAttrs() 就不要在使用defineProps接收了
const add = defineProps({
//标题格式['a','b','c' ]
header: {
type: Array,
default: () => ["a", "as"],
},
});
console.log(add.header[0], "add.header");
</script>
完整案例
父组件
<template>
<Son @sonfun="clickemitsfun" attr="attr" msg="zhzuhuz" age="24">
<template v-slot:slotzhu>测试slot</template>
</Son>
<div>son子组件emit传输的值是 :{
{
sonEmit }}</div>
</template>
<!-- setup不是一个函数的时候可以不需要components组件 -->
<script setup lang="ts">
import {
defineComponent, ref } from 'vue'
import Son from './son.vue'
let sonEmit = ref('')
const clickemitsfun = (value: string) => {
sonEmit.value = value
}
</script>
<style scoped>
</style>
子组件
<template>
<div>
<div v-bind="$attrs">父组件传输的值:{
{
withProps.msg }}==={
{
withProps.age }}</div>
<button @click="sonfun">子组件测试ctx的emit事件</button>
<slot name="slotzhu"></slot>
</div>
</template>
<!-- 注意
$attrs:
vue3支持特殊属性style class
当子组件没接收参数的时候 况且子组件内部含有dom根元素 那么根元素会绑定父元素传输的多余的参数
如果都props接收 那么不会自动绑定
想要手动绑定 在标签上加 v-bind='$attrs' 或者 $attrs.msg
注意:多个平级的根元素 那么不会手动绑定会报错
设置参数inheritAttrs:false 会拒绝在根元素绑定
-->
<script setup lang="ts">
import {
useSlots, useAttrs, defineEmits, defineProps, withDefaults } from 'vue'
type homePropsPerson = {
[p in 'msg' | 'age']: string
}
// 1:useAttrs获取参数的方法
// console.log(useAttrs().age, '--')
// 2:defineProps获取参数的方法
// const homeProps = defineProps<homePropsPerson>()
// console.log(homeProps.msg, 'age')
// 3:withDefaults获取参数默认值的方法
const withProps = withDefaults(defineProps<homePropsPerson>(), {
msg: '小猪猪',
age: '11'
})
// -------defineEmits-----------
const emit = defineEmits(['sonfun'])
const sonfun = () => {
emit('sonfun', '来自子组件的数据')
}
console.log(withProps, 'withProps')
// ------useSlots---------
console.log(useSlots()?.slotzhu!()[0].children, 'useSlots')
</script>
<style scoped>
</style>