“This is the 10th day of my participation in the Gwen Challenge.

1. The first parameter of the setUp function is props

Setup (props,context){} The first parameter props: props is an object that contains all the data that the parent component passes to the child component. Use props to receive in the child component. Object that contains all the properties passed in the configuration declaration, that is, if you want to output the values passed by the parent component to the child component as props. You need to use props for the receive configuration. The props: {... } If you do not accept the configuration through Props, the output value is undefinedCopy the code
<template> <div class="box"> </div> <no-cont :mytitle=" MSG "othertitle=" sonclick"> </no-cont> </template> <script lang="ts"> import NoCont from ".. /components/ nocont.vue "export default {setup () {let MSG ={title:' sonclick(MSSS :string){function sonclick(MSSS :string){ console.log(msss) } return {msg,sonclick} }, components:{ NoCont } } </script>Copy the code
<template> <div @click="sonHander"> I am data in the child component </div> </template> <script lang="ts"> import {defineComponent,setup} from 'vue'; export default defineComponent({ name: 'NoCont', / / not accept / / props: {/ / mytitle: {/ / type: Object / /} / /}, setup(props,context){ console.log('props==>',props.mytitle); // undefined function sonHander(){context.emit('sonclick',' child component to parent component ')} return {sonHander}}}); </script>Copy the code

Why is the output of props. Mytitle undefined? Because we didn't use props for the receive configuration. That is, props:{mytitle:{type:Object}} if we add accept configuration onCopy the code

2. Description of context

The second argument, context, is an object. There is attrs(the object that gets all the attributes on the current tag) in there, but that attribute is all the objects that are not declared to receive in props. If you want to get a value using props, and you declare the value you want to get in props, the attrs is undefined. The first parameter to get the props value is the emit event that the props declare to receive. (This event is used for passing to the parent component.Copy the code
<template> <div @click="sonHander"> I am data in the child component </div> </template> <script lang="ts"> import {defineComponent,setup} from 'vue'; export default defineComponent({ name: 'NoCont', props:{ mytitle:{ type:Object } }, Setup (props,context){// output {title: value passed by the parent component} console.log('props==>',props. Mytitle); / / output the title of the others use the context to obtain value, don't need to use props to accept 】 the console. The log (' = = > 'context, the context attrs. Othertitle); // Output undefined because the context does not need to be accepted using props. console.log('contextmytitle==> ',context.attrs.mytitle); Function sonHander(){context.emit('sonclick',' child component to parent component ')} return {sonHander}}}); </script>Copy the code

3. Child components send events to parent components

<template> <div @click="sonHander"> I am data in the child component </div> </template> <script lang="ts"> import {defineComponent,setup} from 'vue'; export default defineComponent({ name: 'NoCont', props:{ mytitle:{ type:Object } }, Setup (props,context){function sonHander(){context.emit('sonclick',' child component to parent component ')} return {sonHander}}}); </script>Copy the code

4. Optimize event distribution

We know that context is an object with three attributes, attrs,slots, and emit. When the event is dispatched, we can just use the emitCopy the code
<template> <div @click="sonHander"> I am data in the child component </div> </template> <script lang="ts"> import {defineComponent,setup} from 'vue'; export default defineComponent({ name: 'NoCont', props:{ mytitle:{ type:Object } }, Setup (props,{attrs,slots,emit}){function sonHander(){emit('sonclick',' child component to parent component ')} return {sonHander} } }); </script>Copy the code

5. Get the value passed by the parent component

We'll get the value using the props parameter and attrsCopy the code
<template> <hr/> <h2> </h2> <div @click="sonHander"> </div> <h2> Use the props declaration to receive ==>{{mytitle}}</h2> <h2> Use attrs to get ==>{{attrs.othertitle}}</h2> </template> <script lang="ts"> import {defineComponent,setup} from 'vue'; export default defineComponent({ name: 'NoCont', props:{ mytitle:{ type:Object } }, Setup (props,{attrs,slots,emit}){function sonHander(){emit('sonclick',' child component to parent component ')} return {sonHander,attrs}}}); </script>Copy the code