A brief analysis of how to communicate between parent and child components in Vue (pass from father to son|pass from son to father)

How to communicate between parent and child components in

Vue? The following article will introduce to you the methods of father to son and son to father. I hope it will be helpful to you!

1. Pass parent component to child component

⭐⭐

• Parent component is passed to the child component: through the props attribute; [Related recommendations: vuejs video tutorial, web front-end development]
• The child component is passed to the parent component: Trigger the event through $emit;
  

## Here we know that the parent component has some data that needs to be displayed by the child component, then we can pass
propsTo complete the communication between components

To complete the communication between components through props

2. A brief discussion on Props

⭐⭐

So what are
Props?

Function: Accept the properties passed by the parent component
• Props means you can register some custom attributes on the component;
The parent component assigns values ​​to these attributes (attributes), and the child component obtains the corresponding value through the name of the attribute;

In a single-file component using

script setup, props You can use the defineProps() macro to declare:

<script>
const props = defineProps([&#39;foo&#39;])

console.log(props.foo)
</script>

1) The array type

is not used ## In the component of #script setup

, prop can be declared using the props option: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">export default {   props: ['foo'],   setup(props) {     // setup() 接收 props 作为第一个参数     console.log(props.foo)   } }</pre><div class="contentsignin">Copy after login</div></div>Example, use of object syntax

• App.vue

  uses components and attributes defined by integer props

  <template>
  	<show-info></show-info>
  </template>

##showInfo.vue
• Subcomponent

   export default {
          props:{
              name :{
                  type:String,
                  default:"我是默认值name"
              },
              height:{
                  type:Number,
                  default:2
              }
          }
      }

  Also:
So what types of types can be?

String

Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol
• 2) Object type

is declared in the form of object

props (This is quite commonly used) Use script setup

defineProps({
  title: String,
  likes: Number
})

non-script setup

export default {
  props: {
    title: String,
    likes: Number
  }
}

3. The child component is passed to the parent component

⭐⭐ The child component is passed to the parent component and the event is triggered through $emit

The child component passes content to the parent component:

When some events occur in the child component, such as a click in the component, the parent component needs to switch content;

When the child component has some content that you want to pass to the parent component;
• $emit(“add”, count)
The first parameter is the customized event name, and the second parameter It is the passed parameter

⭐⭐
Take a counter case

Here we have two sub-components and a parent component

The sub-component is defined in The name of the event triggered in some cases
• In the parent component, pass in the name of the event to be monitored in the form of v-on (syntactic sugar @), and bind it to the corresponding method;
• Finally, when an event occurs in the child component, the corresponding event is triggered according to the event name
• 1) Parent component
App.vue

The parent component listens to the addition or subtraction events of the child component, and the parent component listens to the event through the child component

The parent component listens to the custom event emitted by the child component, and then performs the corresponding operation

<template>
    <div>
    <h2>当前计数：{{counter}}</h2>
    <!-- 1.自定义add-counter 并且监听内部的add事件 -->
   <add-counter></add-counter>  
   <!-- 2.自定义su-counter组件，监听内部的sub事件 -->
   <sub-counter></sub-counter>
   </div>
</template>
<script>
import AddCounter from &#39;./AddCounter.vue&#39;
import SubCounter from &#39;./SubCounter.vue&#39;
    export default {
  components: { 
    AddCounter,
    SubCounter
 },
    data() {
        return {
            counter:0
        }
    },
    methods:{
        addBtnClick(count) {
            this.counter += count
        },
        subBtnClick(count) {
            this.counter -= count
        }
    }
}
</script>

2) Subcomponent 1

AddCounter.vue

What is defined here is the addition operation of the counter
After the subcomponent event is triggered, through this.$emit The way to emit events

<template>
    <div>
        <button>+1</button>
        <button>+5</button>
        <button>+10</button>
    </div>
</template>
<script>
    export default {
        methods:{
            btnClick(count) {
                // 让子组件发出去一个自定义事件
                // 第一个参数自定义的事件名称，第二个参数是传递的参数
                this.$emit("add",count)
            }
        }
    }
</script>

3) Subcomponent 2
SubCounter.vue

What is defined here is the decrement operation of the counter

Subcomponent event triggering After that, the event is issued through

this.$emit

<template>
    <div>
        <button>-1</button>
        <button>-5</button>
        <button>-10</button>
    </div>
</template>
<script>
    export default {
        // 1.emits数组语法
       emits:["addd"],
       methods:{
        btnClick(count) {
            this.$emit("sub",count)
        }
       }
    }
</script>

This case is very classic, you can think about it again and again~ (Learning video sharing:

Programming Basic video

)

The above is the detailed content of A brief analysis of how to communicate between parent and child components in Vue (pass from father to son|pass from son to father). For more information, please follow other related articles on the PHP Chinese website!