1.在setup中使用watch
//引用watchEffect
import { ref, watchEffect, reactive } from "vue";
//使用ref或reactive方式
export default {
setup(){
let name = ref('123');
let user = reactive({
name: '111'
})
//watch监听,统一监听
watchEffect(()=>{
console.log('20===', name.value);
})
//单独监听
watch(name, (newNum, prevNum) => {
console.log(newNum, prevNum);
console.log('name改变');
})
//多个监听,用[]
watch([name, user], (newNum, prevNum) => {
console.log(newNum, prevNum);
console.log('name,user改变');
})
const setName = ()=>{
name.value = '456';
}
return { name, setName, user }
}
};
2.在setup中使用computed
<template>
<div class="panel">
<span>{{num}}</span>
</div>
</template>
//引用computed
import { computed } from "vue";
export default {
setup(){
let num= computed(()=>{
return 1+9;
})
return { num }
}
};
3.在setup的中参数props
export default {
props: {
msg: {
type: String,
default: '消息'
}
},
//引入prop
setup(prop) {
console.log(prop.msg);
}
}
4.在setup的中参数context
setup的第二个参数context分别有:
// 透传 Attributes(非响应式的对象,等价于 $attrs)
console.log(context.attrs)
// 插槽(非响应式的对象,等价于 $slots)
console.log(context.slots)
// 触发事件(函数,等价于 $emit)
console.log(context.emit)
// 暴露公共属性(函数)
console.log(context.expose)
4.1 插槽的使用
//子组件
<template>
<div class="hello">
<!-- 定义top字段 -->
<slot name="btn2" :top="topValue" />
<h1>{{ msg }}</h1>
<slot name="btn" :bottom="bottomValue" />
</div>
</template>
setup(prop, context) {
let bottomValue = ref('bottomvalue')
let topValue = reactive({
name: 'topname'
})
return { bottomValue, topValue }
}
//父组件
<template>
<div class="panel">
<HelloWorld :msg3="msg">
<!-- #btn对应子组件name="btn", bottom则是子组件:bottom="bottomValue"的:bottom -->
<template #btn="{ bottom }">
<span>{{bottom}}</span>
</template>
<template #btn2="{top}">
<span>{{top.name}}</span>
</template>
</HelloWorld>
</div>
</template>
4.2 触发事件的使用(context.emit)
<template>
<div class="hello">
<buttom @click="setFun1">点击</buttom>
</div>
</template>
setup(prop, context) {
const setFun1 = ()=>{
context.emit('fun1');
}
return { setFun1 }
}
<template>
<div class="panel">
<HelloWorld @fun1="fun1"></HelloWorld>
</div>
</template>
setup(prop, context){
const fun1 = ()=>{
console.log('触发事件=====');
}
return { fun1 }
}
4.3 暴露公共属性(context.expose)
// 子组件
setup(prop, context) {
const supFun = ()=>{
console.log('暴露方法====');
}
//暴露supFun方法
context.expose({supFun});
// return { supFun }
}
// 父组件
<HelloWorld ref="hw"></HelloWorld>
mounted() {
this.$refs.hw.supFun()
}