vue3中setup的两个参数 props，context (attrs，emit，slots)，vue3中的双向数据绑定自定义事件emit和v-model-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3中setup的两个参数 props，context (attrs，emit，slots)，vue3中的双向数据绑定自定义事件emit和v-model。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

setup函数

props参数

案例

第一种写法(用setup函数的方式)：

第二种方法（语法糖形式即setup写入script标签中）也可以传值，

context (attrs，emit，slots)

vue3中的双向数据绑定自定义事件emit和v-model

emit自定义事件

v-model

setup函数

有两个参数分别是props，context

即
 setup(props,context){
		  console.log(props,context)
	  }

props参数

props参数是一个对象，里面存有外部传入的属性

案例

第一种写法(用setup函数的方式)：

父组件（这种写法父组件必须写components命名)

<template>
	<div>
		<h1>这是父组件的name：{{obj.name}}</h1>
		<Box :age="obj.age" :name="obj.name"></Box>
	
	</div>
</template>

<script>
	import Box from "./Box.vue" //引入子组件
	
	import { reactive } from 'vue';
	
	export default{
		components:{  //这种写法必须命名
			Box
		},
		setup(){
			let obj=reactive({name:"小狮子",age:18})
			return {obj}
		}

	}
	 
</script>

子组件

<template>
	<div>
		<h1>33</h1>
		<h2>这是子组件的age：{{age}}</h2>
		<h3>这是子组件的name：{{name}}</h3>
	</div>
</template>

<script>
	export default{
		props:["age",'name'],
		setup(props,context) {
			console.log(props,666) //打印props属性
		}
	}
</script>

此时效果图为：

且控制台打印：

第二种方法（语法糖形式即setup写入script标签中）也可以传值，

父组件：

<template>
	<div>
		<h1>这是父组件的name：{{obj.name}}</h1>
		<Box :age="obj.age" :name="obj.name"></Box>
	
	</div>
</template>

<script setup>
	import Box from "./Box.vue"
    import { reactive } from 'vue';
      let obj=reactive({name:"小狮子",age:18})
</script>

子组件（此时需要自己在script标签中将值传进来用 defineProps([ ]) ）

<template>
	<div>
		<h1>33</h1>
		<h2>这是子组件的age：{{obj.age}}</h2>
		<h3>这是子组件的name：{{obj.name}}</h3>
	</div>
</template>

<script setup>
     let obj=defineProps(["age","name"])
	 // console.log(props,222)
</script>

效果一样

<script setup=

context (attrs，emit，slots)

context：上下文对象

attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性

slots: 写入插槽的内容

emit: 自定义事件函数
	  setup(props,context){
		  console.log(context.attrs,context.emit,context.slots)
	  }

vue3中的双向数据绑定自定义事件emit和v-model

emit自定义事件

下面只阐述语法糖形式的内容即setup写入script标签中的写法

注意：

defineEmit 是vue3.2版本之前的用法
useContext 3.2 但是废弃了 useContext函数的返回值有{emit,attr,}
vue3.2版本之后用defineEmits

案例：子组件向父组件传值

父组件代码
<template>
	<div>
		<h1>这是父组件的name：{{obj.name}}</h1>
		
		<Box :age="obj.age" :name="obj.name" @mychange="fn"></Box>
	
	</div>
</template>

<script setup>
	import Box from "./Box.vue"
    import { reactive } from 'vue';
      let obj=reactive({name:"小狮子",age:18})
	  
	  let fn=(arg1,arg2)=>{ 
		  obj.age=arg1
		  console.log("这是父组件的自定义事件","这是传入的值：",arg1,arg2)
	  }
</script>
子组件（defineEmits可以不引入，3.2版本之后自带）

如果不用setup语法糖，用的setup函数中的参数context使用emit，即cotext.emit去使用
<template>
	<div>
		<h1>33</h1>
		<h2>这是子组件的age：{{obj.age}}</h2>
		<h3>这是子组件的name：{{obj.name}}</h3>
		<button @click="fn1">触发自定义事件</button>
	</div>
</template>

<script setup>
	import {defineEmits} from "vue" //可以不引入
	
    let obj=defineProps(["age","name"])
	  
	let emit=defineEmits() //如果用的setup函数则是用cotext.emit去使用
	  
    let fn1=()=>{
		
		emit("mychange",11,22) //可以传参 //用setup函数则为context.emit("mychange",11,22)
	}
	  
</script>
效果图

点击按钮后界面后控制台的内容为

成功触发了自定义事件，还可以得出子组件向父组件传值可以用自定义事件

v-model

由上边的emit得知，v-model也是大致一样

//父组件
<HomeView v-model:title="bookTitle"></HomeView>

//子组件
1.接收参数：props:["title"] （在语法糖中则是用defineProps(["title"])）
2.定义事件：emits: ['update:title'] 必须写update
3.触发事件：this.$emit("update:title","子组件传递给父组件的值")

重点举例：多个 v-model 绑定

如：

<MyVmodel v-model="msg" v-model:msg2="msg2" v-model:msg3="msg3"></MyVmodel>

案例：

父组件
<template>
	<div>
		<h1>这是父组件的msg:{{msg1}}--{{msg2}}--{{msg3}}</h1>
		
		<Box :age="obj.age" :name="obj.name" 
v-model:msg1="msg1" v-model:msg2="msg2" v-model:msg3="msg3"></Box>
	
	</div>
</template>

<script setup>
	import Box from "./Box.vue"
    import { reactive,ref} from 'vue';
      let obj=reactive({name:"小狮子",age:18})
	  
	  let msg1=ref("大牛")
	  let msg2=ref("大狮")
	  let msg3=ref("大羊")
</script>
子组件
<template>
	<div>

		<h2>这是子组件的age：{{obj.age}}</h2>
		<h3>这是子组件的name：{{obj.name}}</h3>
		<h4>这是v-model传入的值：{{obj.msg1}}--{{obj.msg2}}--{{obj.msg3}}</h4>
		<button @click="fn1">改变msg1</button>
		<button @click="fn2">改变msg2</button>
	</div>
</template>

<script setup>
	import {defineEmits} from "vue"
	
    let obj=defineProps(["age","name","msg1","msg2","msg3"])
	  
	let emits=defineEmits()
	  
    let fn1=()=>{		
		emits("update:msg1","小牛") //写多个传参，只生效第一个
	}
	let fn2=()=>{
		emits("update:msg2","小狮") //写多个传参，只生效第一个
	}
	  
</script>
效果图

当我们分别点击两个按钮时：

说明双向数据绑定成功文章来源地址https://www.toymoban.com/news/detail-688922.html

到了这里，关于vue3中setup的两个参数 props，context (attrs，emit，slots)，vue3中的双向数据绑定自定义事件emit和v-model的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！