Methods of passing values between vue components Vue parent and child components passing values and parameters

https://www.cnblogs.com/lingdu87/p/9147555.html

Analysis of value transfer methods between Vue components
 1. Passing from parent component to child component 
 1. The parent code of the parent component is as follows:
  

<template>
    <div class="parent">
      <h2>{
   
   { msg }}</h2>
      <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量-->
  </div>
  </template>
  <script>
  import son from './Son' //引入子组件
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
      }
    },
    components:{son},
  }
  </script>

 2. The subcomponent son code is as follows:
  

<template>
    <div class="son">
      <p>{
   
   { sonMsg }}</p>
      <p>子组件接收到内容：{
   
   { psMsg }}</p>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
      }
    },
    props:['psMsg'],//接手psMsg值
  }
</script>

  3. The rendering is as follows:
 
2. The child component passes the value to the parent component 
  by binding the event and then passing the value via $emit 1. The parent code of the parent component is as follows
  
  

<template>
    <div class="parent">
      <h2>{
   
   { msg }}</h2>
      <p>父组件接手到的内容：{
   
   { username }}</p>
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>  <!--绑定自定义事件transfer-->
    </div>
  </template>
  <script>
  import son from './Son'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
        username:'',
      }
    },
    components:{son},
    methods:{
      getUser(msg){
        this.username= msg
      }
    }
  }
  </script>

  2. The subcomponent son code is as follows:
  

<template>
    <div class="son">
      <p>{
   
   { sonMsg }}</p>
      <p>子组件接收到内容：{
   
   { psMsg }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
      setUser:function(){
        this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
      }
    }
  }
  </script>

 3. The rendering is as follows:
 
3. Passing values ​​through Vuex state management 
 1. Load vuex through npm, create the store.js file, and then introduce it in main.js. The store.js file code is as follows: 
  import Vue from 'vue' 
  import Vuex from 'vuex' 
  Vue.use(Vuex); 
  const state = { 
    author:'Wise Wang' 
  }; 
  const mutations = { 
    newAuthor(state,msg){ 
      state.author = msg 
    } 
  } 
  export default new Vuex.Store({ 
    state , 
    mutations 
  }) 2. The parent code of the parent component is as follows:
  
  

<template>
    <div class="parent">
      <h2>{
   
   { msg }}</h2>
      <p>父组件接手到的内容：{
   
   { username }}</p>
      <input type="text" v-model="inputTxt">
      <button @click="setAuthor">传参</button>
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>
    </div>
  </template>
  <script>
  import son from './Son'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
        username:'',
        inputTxt:''
      }
    },
    components:{son},
    methods:{
      getUser(msg){
        this.username= msg
      },
      setAuthor:function () {
        this.$store.commit('newAuthor',this.inputTxt)
      }
    }
  }
  </script>

 3. The subcomponent son code is as follows:
  

<template>
    <div class="son">
      <p>{
   
   { sonMsg }}</p>
      <p>子组件接收到内容：{
   
   { psMsg }}</p>
      <p>这本书的作者是：{
   
   { $store.state.author }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
      </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
      setUser:function(){
        this.$emit('transfer',this.user)
      }
    }
  }
  </script>

  4. The renderings are as follows: