组件之间的数据共享

组件之间的数据共享:

一、父组件传递给子组件

①App.vue

template

给子组件绑定值

<Left :msg="message" :user="userinfo"></Left>

script

声明需要发送的数据

data() {
    return{
      message: "hello，这是来自父组件的祝福：祝你开心",
      userinfo: { name: 'wsc', age: 18 }
    }  
  }

②Left.vue

script

声明props

props: ['msg', 'user'],

template

直接使用

    <p>msg 的值是：{{ msg }}</p>
    <p>user 的姓名是：{{ user.name }}</p>
    <p>user 的年龄是：{{ user.age }}</p>

二、子组件传递给父组件

①Right.vue

template

设定一个增加按钮

<button @click="add">Add1</button>

script

设定add() 的方法和数据

data() {
      return{
        count:0
      }  
    },
methods: {
        add() {
            this.count+=1
            this.$emit('numchange',this.count)
        }
    }

②App.vue

template

Right组件，一产生就触发getNewCount这个事件

<p>countFromRight:{{ countFromRight }}</p>
<Right @numchange="getNewCount"></Right>

script

设定add() 的方法和数据

data() {
    return{
      countFromRight:0
    }  
  },
  components: {
    Right
  },
  methods: {
    getNewCount(val){
      this.countFromRight = val
    }
  }

三、兄弟组件相互传递

创建@/components/eventBus.js

import Vue from 'vue'
export default new Vue()

①在Right.vue和Right.vue中都导入eventBus.js 模块

import bus from './eventBus.js'

②Left.vue

template

    <h3>这个是Left</h3>
    <button @click="send">把好诗发给 Right</button>

script

    data() {
    return {
      str: `左组件写的诗：黑云压城城欲摧，渚青沙白鸟飞回。借问酒家何处是，半江瑟瑟半江红！`,
      arr: [
        { id: 1, name: 'zs' },
        { id: 2, name: 'ls' }
      ]
    }
  },
    methods: {
    send() {
      // 2. 通过 eventBus 来发送数据，发送方：
      bus.$emit('share', this.str)
    }
  }

③Right.vue

template

        <h3>这个是right</h3>
        <p>{{ msgFromLeft }}</p>

script

 data() {
      return{
        msgFromLeft: ''
      }  
    },
    created() {
    // 2. 为 bus 绑定自定义事件，接收方：
    bus.$on('share', val => {
      console.log('在 Right 组件中定义的 share 被触发了！', val)
      this.msgFromLeft = val
    })
  }