vue3中的setup使用

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()
}