一、setup的两个注意点
-
setup执行的时机
- 在
beforeCreate
之前执行一次,this是undefined
。
- 在
-
setup的参数
- props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
- context:上下文对象
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
this.$attrs
。 - slots: 收到的插槽内容, 相当于
this.$slots
。 - emit: 分发自定义事件的函数, 相当于
this.$emit
。
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
二、vue2中的$attrs和$slots
- 父组件给子组件传值时,子组价没有通过props接受,接受的值在$attrs中。
- 插槽定义的值,存储到$slots中
父组件:App组件
<template>
<div class="app">
<h1>我的是Vue2写的效果</h1>
<Demo msg="你好啊" school="尚硅谷">
<template slot="test1">
<span>青青子衿</span>
</template>
<template slot="test2">
<span>悠悠我心</span>
</template>
</Demo>
</div>
</template>
<script>
import Demo from './components/Demo.vue';
export default {
components: {
Demo
}
}
</script>
<style scoped>
.app {
background-color: skyblue;
padding: 10px;
}
</style>
子组件:Demo组件
<template>
<div class="demo">
<h2>我是Demo组价</h2>
</div>
</template>
<script>
export default {
mounted() {
console.log(this);
}
}
</script>
<style scoped>
.demo {
background-color: orange;
padding: 10px;
}
</style>
三、vue3说明
- 父组件:App组件
<template>
<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
<template v-slot:qwe>
<span>尚硅谷</span>
</template>
<template v-slot:asd>
<span>尚硅谷</span>
</template>
</Demo>
</template>
<script>
import Demo from './components/Demo.vue'
export default {
name: 'App',
components:{Demo},
setup(){
function showHelloMsg(value){
alert(`你好啊,你触发了hello事件,我收到的参数是:${value}!`)
}
return {
showHelloMsg
}
}
}
</script>
- 子组件:Demo组件
<template>
<div>
<h1>一个人的信息</h1>
<h2>姓名:{{ person.name }}</h2>
<h2>年龄:{{ person.age }}</h2>
<button @click="test">测试触发一下Demo组件的Hello事件</button>
</div>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'Demo',
props: ['msg', 'school'],
emits: ['hello'],
setup(props, context) {
console.log('---setup(props)',props)
console.log('---setup(context)',context)
console.log('---setup(context.attrs)',context.attrs) //相当与Vue2中的$attrs
console.log('---setup(context.emit)',context.emit) //触发自定义事件的。
console.log('---setup(context.slots)', context.slots) //插槽
//数据
let person = reactive({
name: '张三',
age: 18
})
//方法
function test() {
context.emit('hello', 666)
}
//返回一个对象(常用)
return {
person,test
}
}
}
</script>