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命名)

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

子组件

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

此时效果图为：

说明传值成功

 且控制台打印：

说明props参数为一个proxy对象，里面存有父组件传入的属性值

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

父组件：

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

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

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

效果一样

 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

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

父组件代码

 
<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去使用

 
<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也是大致一样

//父组件

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

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

如：

 

案例：

父组件

 
<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>

子组件

 
<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>

效果图

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

 

 说明双向数据绑定成功