vue传值方式

落日映苍穹つ 2023-01-03 01:27 174阅读 0赞

其实很简单很好理解，引用官网一句话：

> 父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

这里不包含同级组件  
父传子

父

<template>
      <div>
        父组件:
        <input type="text" v-model="name">
        <br>
        <br>
        
        <child :inputName="name"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default { 
        components: { 
          child
        },
        data () { 
          return { 
            name: ''
          }
        }
      }
    </script>

子

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

2.子传父

子

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

父

<template>
      <div>
        父组件:
        <span>{ { name}}</span>
        <br>
        <br>
        
        <child v-on:childByValue="childByValue"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default { 
        components: { 
          child
        },
        data () { 
          return { 
            name: ''
          }
        },
        methods: { 
          childByValue: function (childValue) { 
            // childValue就是子组件传过来的值
            this.name = childValue
          }
        }
      }
    </script>

3.非父子组件进行传值

> 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

公共bus.js

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

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

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