What are the three ways to pass values ​​in Vue?

Vue has three value-passing methods: 1. "Father-to-child"; the parent component delivers data (value-passing) to the child component through prop. 2. "Son to parent"; the child component sends messages to the parent component through "events". 3. "Non-parent-child value transfer"; a common public instance file "bus.js" needs to be defined between non-parent-child components to serve as an intermediate warehouse to transfer values.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The three commonly used value-passing methods in Vue:

• Pass from father to son

• Pass from son to father

• Non-father-to-son pass by value

##Quote from the official website: The relationship between parent and child components can be summarized as Props are passed down and events are passed up. The parent component sends data to the child component through props, and the child component sends messages to the parent component through events.

1. Parent component passes value to child component:

Parent component:

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
 import child from &#39;./child&#39;
 export default {
    components: {
      child
    },
    data () {
      return {
        name: &#39;&#39;
      }
    }
  }
</script>

Child component:

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

2. Child component passes value to parent component:

Child component:

<template>
  <div>
    子组件:
    <span>{{childValue}}</span>
    <!-- 定义一个子组件传值的方法 -->
    <input type="button" value="点击触发" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: &#39;我是子组件的数据&#39;
      }
    },
    methods: {
      childClick () {
        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit(&#39;childByValue&#39;, this.childValue)
      }
    }
  }
</script>

Parent component:

<template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from &#39;./child&#39;
  export default {
    components: {
      child
    },
    data () {
      return {
        name: &#39;&#39;
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

3. Non-parent-child Component value transfer:

To transfer values ​​between non-parent and child components, you need to define a common public instance file bus.js as an intermediate warehouse to transfer values, otherwise routing components cannot reach each other. to the effect of passing value.

Public bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

Component A:

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from &#39;./bus.js&#39;
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit(&#39;val&#39;, this.elementValue)
      }
    }
  }
</script>

Component B:

d477f9ce7bf77f53fbcf36bec1b69b7a
  dc6dce4a544fdca2df29d5ac0ea9906b
    B组件:
    db522d5eab17920485b61ce7362da4b9
    45a2772a6b6107b401db3c9b82c049c2{{name}}54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
2cacc6d41bbb37262a98f745aa00fbf0

Related recommendations:《

vue.js Tutorial》

The above is the detailed content of What are the three ways to pass values ​​in Vue?. For more information, please follow other related articles on the PHP Chinese website!