Home >Web Front-end >Vue.js >What are the ways to pass values ​​in Vue?

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

藏色散人
藏色散人Original
2021-09-03 11:21:1411728browse

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>

Child component:

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

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>

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>

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()

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>

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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:How to install vuejs3Next article:How to install vuejs3