Table of contents
The first way of writing (using the setup function):
Two-way data binding custom event emit and v-model in vue3
setup function
There are two parameters are props, context
Right now
setup(props,context){ console.log(props,context) }
props parameter
The props parameter is an object , which contains the properties passed in from outside
the case
The first way of writing (using the setup function ):
Parent component (this way of writing the parent component must write components named)
<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>Subassembly
<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>At this time, the effect picture is:
Indicates that the value transfer is successful
And the console prints:
Explain that the props parameter is a proxy object, which contains the attribute values passed in by the parent component
The second method (grammatical sugar form, that is, setup is written in the script tag) can also pass values,
parent component:
<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>Subcomponent (you need to pass the value in the script tag by yourself at this time using 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>same effect
context (attrs，emit，slots)
context: context object
attrs: The value is an object, including: attributes passed from outside the component but not declared in the props configuration
slots: the content to write to the slot
emit: custom event function
setup(props,context){ console.log(context.attrs,context.emit,context.slots) }
Two-way data binding custom event emit and v-model in vue3
emit custom event
The following only explains the content of the syntactic sugar form , that is, the way of writing the setup into the script tag
Notice:
defineEmit is the usage before vue3.2 version
useContext 3.2, but the return value of the discarded useContext function is {emit, attr,}
use defineEmits after vue3.2 versionCase: Child component passes value to parent component
parent component code
<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>Subcomponents ( defineEmits can not be introduced, it comes with version 3.2 )
If you don’t use the setup syntactic sugar, use the parameter context in the setup function to use emit, that is, cotext.emit to use
<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>renderings
After clicking the button, the content of the console after the interface is
The custom event is successfully triggered, and it can also be concluded that the child component can use the custom event to pass values to the parent component
v-model
According to the above emit, the v-model is roughly the same
//Parent component
<HomeView v-model:title="bookTitle"></HomeView>//Subcomponent
1. Receive parameters: props:["title"] ( use defineProps(["title"]) in syntactic sugar
) 2. Define events: emits: ['update:title'] must write update
3. Trigger event: this.$emit("update:title", "The value passed from the child component to the parent component")Key Example: Multiple
v-modelBindingslike:
<MyVmodel v-model="msg" v-model:msg2="msg2" v-model:msg3="msg3"></MyVmodel>
case:
parent component
<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>Subassembly
<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>renderings
When we click two buttons separately:
Indicates that the two-way data binding is successful
