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

What are the ways to pass values in Vue?

藏色散人

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

Original

11674 people have browsed it

Vue value transfer methods include: 1. props are passed downwards and events are passed upwards; 2. child components trigger custom events of parent components through $emit; 3. non-parent-child components are configured by defining public instance files value transfer between.

What are the ways to pass values in Vue?

The operating environment of this article: windows7 system, vue2.5.17 version, DELL G3 computer.

What are the value-passing methods in vue?

Three commonly used value-passing methods in Vue

Parent Passing to children

The relationship between parent and child components can be summarized as props are passed downwards and events are passed upwards. The parent component sends data to the child component through props, and the child component sends messages to the parent component through events.

Parent component:

<template>
  <p>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>  //child子组件通过 :inputName="name" 将值传过去
  </p>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

Copy after login

Child component:

<template>
  <p>
    子组件:
    <span>{{inputName}}</span>
  </p>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,   //在这里对传过来的进行接收
      required: true
    }
  }
</script>

Copy after login

son to parent

Child component can Trigger the parent component's custom event through $emit. vm.$emit(event,arg) is used to trigger events on the current instance;

Subcomponent:

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

Copy after login

Parent component:

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

Copy after login

To pass values between non-parent and child components

To pass values between non-parent and child components, you need to define a public public instance file bus.js as an intermediate warehouse to pass values, otherwise there will be no communication between routing components. There is no effect of passing value.

Public bus.js

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

Copy after login

Component A:

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

Copy after login

Component B:

<template>
  <p>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </p>
</template>
<script>
  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++
      }
    }
  }
</script>

Copy after login

Related recommendations: "vue.js Tutorial》《The latest 5 vue.js video tutorial selections》

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