vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults

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中的$attrsconsole.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>

vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults相关推荐

Vue3 setup语法糖勾子函数使用简易教程（上）
Vue3 setup语法糖勾子函数使用简易教程(上) 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. ...
Vue3 script setup 语法糖详解
前言: 目前setup sugar已经进行了定稿,vue3 + setup sugar + TS的写法看起来很香,写本文时 Vue 版本是 "^3.2.6" 1.script se ...
uniapp开发：uniapp快速体验vue3.2之setup语法糖，怎么使用怎么爽
目录概要拉开序幕的setup语法糖生命周期钩子 ref函数与reactive函数对比 computed计算属性监视(watch.watchEffect) 组件注册组件传值 provide/i ...
vue3.2 setup语法糖，你值得拥有
0.前言在vue3中删除了vue2中的data函数,因此,vue3.0要在template中使用某些变量就必须在最后return出来,多次声明变量,不太方便,也不太友好.而在vue3.2版本之后,我 ...
vue3 setup语法糖与原始写法对比
只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,也不用写setup函数,也不用写export default ,甚至是自定义指令也可以在我们的template中自动 ...
vue3 setup语法糖事件引用和写法
setup基础用法 setup是vue3新增的一个属性,默认写法是在代码中用setup方法,然后在setup中return. setup(){const func = () => {//这里写方 ...
vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了<script setup> 这种写法,那么子组件方法需要采用defineExpose()进行修饰,才能被外界调用.上代码: 1.子组件 _p ...
vue3 setup 语法糖的项目实战用法
vue3.2 之后语法糖起初 Vue3.0 暴露变量必须 return 出来,template中才能使用: 这样会导致在页面上变量会出现很多次. 很不友好,vue3.2只需在script标签中添加s ...
Vue3在setup语法糖下的父子组件传值
文章目录前言一.前期准备二.初始化项目 1.父组件传值给子组件 2.子组件传值给父组件 3.完整代码总结前言 vue版本大于>3.2 使用setup语法糖一.前期准备 setup介绍 ...

vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults

vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults相关推荐

最新文章

热门文章

vue3的setup语法糖获取 代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults

vue3的setup语法糖获取 代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults相关推荐

最新文章

热门文章

vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults

vue3的setup语法糖获取代替 setup方法下的contenxt的属性useAttrs， useSlots， defineEmits拓展defineProps withDefaults相关推荐