What are the three ways to pass values in Vue?-Vue.js-php.cn

What are the three ways to pass values in Vue?

青灯夜游

Release： 2023-01-13 00:45:25

Original

3668 people have browsed it

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.

What are the three ways to pass values in Vue?

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>

Copy after login

Child component:

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

Copy after login

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>

Copy after login

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>

Copy after login

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 &#39;vue&#39;
export default new Vue()

Copy after login

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>

Copy after login

Component B:

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from &#39;./bus.js&#39;
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on(&#39;val&#39;, (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>

Copy after login

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!