Vue component to pass valuePropsand$emit

preface

$listeners are also aware of the ways in which $parent and $refs are posted, but they may not remember so many of them at the moment. Please note that 😁 is an important tool for us to learn how to do this

Today we are going to talk about props and $emit😎

The body of the

First of all, what is props? How does it work? Let’s look at the official documents

In short, it is the method of transferring values between components. Let’s look at the method of transferring values in official documents

Obviously, arrays and objects can be passed, but Q will say that arrays are not recommended at present and should be used only rarely

So how does this thing work, without further ado

<template> <div class="father"> <h2> Parent </h2> <! --> <son info=" How are you?" </son> </div> </template> <script> import son from './components/01.son.vue' Export default {// register sub-component components: {son}} </script> <style> body {margin: 0; } .father { height: 100vh; background-color: skyblue; /* Overflow: hidden; } </style>Copy the code
<template> <div class="son"> < H3 > sub-component </h3> <p>{{info}}</p> </div> </template> <script> export default {name: </script> <style>. Son {border: 3px solid hotpink; width: 300px; height: 300px; background-color: orange; } </style>Copy the code

The parent component needs to pass a value to the child component. The value in the parent component needs to correspond to the value in the props.

Object usage has more type validation than array usage

<template> <div class="son"> < H3 > sub-component </h3> <p>{{info}}</p> </div> </template> <script> export default {name: 'son', props: {info: {// Type type: String, // Default value default: 'Yangyang, yangyang'}, food: {type: String, // Mandatory required: true, validator (value) { // console.log('value:', // return false // must const res = [' herring ', 'black garlic ',' durian ', Return res}}}} </script> <style>. Son {border: 3px solid hotpink; width: 300px; height: 300px; background-color: orange; } </style>Copy the code

Type is to define the types, common have (Number, String, Boolean, Array, Object)

Required Specifies whether the Validator is a custom validation function

Small Q reminds you that it is not recommended to modify the value obtained from the child component (although it can be modified) because the value in the child component flows through the parent component. If the child component modifies the value, the data in the parent component changes, and the value in the child component also changes (single item number stream).

$emitUse:

Child components:

  1. The child component is called emit-use this time

  2. Emit the event via $emit(‘ event name ‘)

  3. The name of the event can be arbitrary, but it makes sense

<template> <div class="emit-container"> <input @click="add" type="button" value=" add" > </div> </template> <script> Export default {name: 'ememit -use', methods:{add(){// emit('add')}}} </script> <style></style>Copy the code

The parent component:

  1. Register and implement add events

  2. Can implement a counting function

<template> <div> <! </h2> < ememit -use @add="fatherAdd"></ ememit -use> </div> </template> <script> export default { data() { return { num:0 } }, methods:{ fatherAdd(){ console.log('fatherAdd') this.num++ } } } </script>Copy the code

Sometimes, not only do we need to trigger events, but we also need to pass in custom parametersemitThe method is followed by the required parameters

Syntax: emit(‘ event name ‘, argument 1, argument 2….)

Child components:

  1. The child component is called emit-param this time

  2. Emit is triggered by a double click event in a child component

  3. Simultaneously passing data

<template> <div class="emit-container"> <input @dblclick="add" type="button" value=" double click "> </div> </template> <script> export default { name: $emit('add',2)}} </script> <style></style>Copy the code

The parent component

  1. Register the event and define the parameters

  2. Gets and uses parameters

  3. For comparison purposes, components that did not pass data in the previous step are also retained as comparisons

  4. Click on the first component and add 1 at a time

  5. Double click on the second component to add 2 once

<template> <div> <! -- emit emit arguments --> <h2> you click :{{num}} times </h2> <! - don't pass parameters - > < emit - use @ add = "fatherAdd" > < / emit - use > <! --> <emit-param @add="fatherAdd"></emit-param> </div> </template> <script> export default {data() {return { num: 0 } }, methods: {fatherAdd(num) {console.log('fatherAdd') console.log(' num:${num} ') If (num){this.num+=num}else{// If there is no argument, sum 1 this.num++}}}} </script> <style></style>Copy the code

Note:

  1. If you want to pass multiple arguments, separate them with commas and continue writing backwards

  2. When the parent component registers the event, it also defines the corresponding parameters

  3. If you don’t want to pass it one by one, you can put multiple pieces of data into one object, that’s fine

END

This is how to use props and $emit. I need to explore the test code to find my own way of understanding this method. If you have any questions, you can directly private me, welcome to learn and progress with me.

I am still learning the front-end small Q😘