Value transfer between VUE components

  • Parent component passes value to child component
  • Child components pass values to parent components
  • Sibling components pass values to each other or to two unrelated components

In the use of Vue, components are often used. The advantages are: 1, if there is a function that many places will use, written as a component will not have to write this function repeatedly; 2, the page content will be concise; Convenient control; Subcomponents pass values through props, and emit events; Emit emit events; Emit emit events; On Listening event

<template> <div class="parent"> <h2>{{MSG}}</h2> <son psMsg=" parent"> </son> <! </div> </template> <script> import son from './ son '// 'HelloWorld', data () {return {MSG: 'parent ',}}, Components :{son},} </script> 2. <template> <div class="son"> <p>{{sonMsg}}</p> <p> The child component receives the content: {{ psMsg }}</p> </div> </template> <script> export default { name: "Son," the data () {return {sonMsg: 'child components'}}, props: [' psMsg], / / receiving psMsg value} < / script > 3. The renderings are as follows:Copy the code
The child sends a value to the parent by binding the event and then sending the value 1 to the $emit component. <template> <div class="parent"> <h2>{{MSG}}</h2> <p> {{username}} < / p > < son psMsg = "the content of the father the son: daddy called" @ transfer = "getUser" > < / son > <! Transfer --> </div> </template> <script> import son from './ son 'export default {name: 'HelloWorld', data () { return { msg: 'Parent component ', username:'',}}, components:{son}, methods:{getUser(MSG){this.username= MSG}} </script> 2. <template> <div class="son"> <p>{{sonMsg}}</p> <p> The child component receives the contents: {{psMsg}}</p> <! <button @click="setUser"> </button> </div> </template> <script> export default { name: "Son," the data () {return {sonMsg: 'child components, user:' son pass the content of the father '}}, props: [' psMsg], $emit('transfer',this.user) {$emit('transfer',this.user)}} Import Vue from 'Vue' import vuex from 'vuex' vue.use (vuex); import Vue from 'Vue' import vuex from 'vuex' vue.use (vuex); import Vue from 'Vue' import vuex. const state = { author:'Wise Wang' }; const mutations = { newAuthor(state,msg){ state.author = msg } } export default new Vuex.Store({ state, mutations }) 2. <template> <div class="parent"> <h2>{{MSG}}</h2> <p> {{username}}</p> <input type="text" v-model="inputTxt"> < button@click ="setAuthor">  @transfer="getUser"></son> </div> </template> <script> import son from './Son' export default { name: 'HelloWorld', data () { return { msg: }}, components:{son}, methods:{getUser(MSG){this.username= MSG}, setAuthor:function () { this.$store.commit('newAuthor',this.inputTxt) } } } </script> 3. <template> <div class="son"> <p>{{sonMsg}}</p> <p> The child component receives the contents: {{psMsg}}</p> <p> {{ $store.state.author }}</p> <! <button @click="setUser"> </button> </div> </template> <script> export default { name: "Son," the data () {return {sonMsg: 'child components, user:' son pass the content of the father '}}, props: [' psMsg], methods:{ setUser:function(){ this.$emit('transfer',this.user) } } } </script>Copy the code