Example of Vue implementation value transfer function between components

This article describes the function of passing values ​​between components by vue. Share it for your reference, as follows:

slot tag:

If you want to insert content into components that have a well-packaged structure, you need help<slot></slot>

Associate in components:

In the template:

<slot name='txt'></slot>

Component calls:

<p slot='txt'></p>

Note: If only slots are defined above each name attribute, there can only be one slot

<div class='box'>
  <com>
    <p slot='txt'></p>
  </com>
</div>
<template >
  <div>
    <slot name="txt"></slot>
  </div>
</template>

('com',{
  template:"#c"
})

Parent component passes value to child component：props

Parent component:

<template>
  <child :parent-msg='a'></child>
</template>

Subcomponents:

child：{
  template：'#chi'
  props：['parentMsg']
}

Passing values ​​from child components to parent components:

vue only runs the single-select pass of data. In the value passed by the child component to the parent component, event triggering is required

Subcomponents:

<template>
  <div @click="up"></div>
</template>

methods:{
 up(){
  this.$emit('fn','msg') // Actively trigger the fn method, msg is the data that needs to be passed }
}

Parent component:

<div>
  <child @fn="getval"></child>
</div>

methods:{
  getval(msg){ // The data received by msg    =msg
  }
}

I hope this article will be helpful to everyone's programming.