props+emit实现父子组件传参，子组件接参的四种情况

s863542

已于 2024-05-09 21:12:07 修改

阅读量218

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-05-09 18:56:18 首次发布

本文链接：https://blog.csdn.net/weixin_40329396/article/details/138626295

版权

definedModel

适用于vue3.4及单文件组件中

toRef

{
	props:["msg"],                 
	setup(props,{emit}) {
		let msg1 = toRef(props,"msg")
		// let msg1 = computed(()=>props.msg.toUpperCase())
        //let msg1 = ref(props.msg)//使用错误
		//toRef(props,"msg")!==ref(props.msg)(失去响应性)

					
		const handlerClick = function(){
			emit("update:msg","子组件更新父组件msg!")
				}

		return {
			msg1,
			handlerClick
			
			}
		}
}

data+watch

{
	props:["msg"],	            
	data(){
		return {
			msg1:this.msg
		}
	},
	watch:{
		msg(newVal,oldVal){
			this.msg1 = newVal
			
		}
	},
	methods:{
			handlerClick(){
				this.$emit("update:msg","子组件更新父组件msg!")
			}
	},
}

computed(更强调对值的额外处理)

{
	props:["msg"],                 
	methods:{
			handlerClick(){
				this.msg1 = "子组件更新父组件msg!"
				// this.$emit("update:msg","子组件更新父组件msg!")
			}
	},
	computed:{
		msg1:{
			get(){
				return this.msg.toUpperCase()
			},
			set(val){
				this.$emit("update:msg",val)
			}
		}
	},
}

完整

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<script type="importmap">
			{
			"imports": {
			"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
			}
		}
		</script>
		<div id="app">
			<h1>父组件</h1>
			<ul>
				<li>
					父组件字符串msg===={{msg}}
				</li>
			</ul>
			<div>
				<button @click="changeMsg">修改msg</button>
			</div>
			<component-a v-model:msg="msg" />
		</div>

		<template id="template-a">
			<h1>子组件</h1>
			<ul>
				<li>子组件定义的msg1===={{msg1}}</li>
				<li>父组件传过来的msg===={{msg}}</li>
			</ul>

			<div>
				<button @click="handlerClick">修改msg</button>
			</div>
		</template>
		<script type="module">
			import {
				createApp,
				ref,
				computed,
                toRef
			} from 'vue'


			//定义子组件A
			const ComponentA = {
				props: ["msg"],
				// data(){
				// 	return {
				// 		msg1:this.msg
				// 	}
				// },
				// watch:{
				// 	msg(newVal,oldVal){
				// 		this.msg1 = newVal

				// 	}
				// },
				methods: {
					handlerClick() {
						this.msg1 = "子组件更新父组件msg!"
						// this.$emit("update:msg","子组件更新父组件msg!")
					}
				},
				computed: {
					msg1: {
						get() {
							return this.msg.toUpperCase()
						},
						set(val) {
							this.$emit("update:msg", val)
						}
					}
				},
				setup(props, {
					emit
				}) {
					// let msg1 = toRef(props,"msg")
					let msg1 = computed(() => props.msg.toUpperCase())

					const handlerClick = function() {
						emit("update:msg", "子组件更新父组件msg!")
					}
					return {
						msg1,
						handlerClick

					}
				},

				template: "#template-a"
			}


			//声明父组件
			const app = createApp({
				components: {
					ComponentA,
				},
				setup() {
					let msg = ref("hello msg!")
					const changeMsg = function() {
						msg.value = "hello world"
					}

					return {
						msg,
						changeMsg,
					}
				}
			})
			app.mount('#app')
		</script>
	</body>
</html>

体验demo