目录
第二种方法（语法糖形式即setup写入script标签中）也可以传值，
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>此时效果图为：
说明传值成功
且控制台打印：
说明props参数为一个proxy对象，里面存有父组件传入的属性值
第二种方法（语法糖形式即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>效果一样
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>效果图
当我们分别点击两个按钮时：
说明双向数据绑定成功
