Vue组件传值三种方法

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

父传子

父组件如下：

<template>
  <div>
      <header :title="list">子组件</header>
  </div>
</template>

<script>
import header from './header'
export default {
    data () {
        return {
            list:1 //向组子件传递的值
        }
    },
    components:{
        header
    }
}

子组件如下：
接收父子间传过来的值（1）

<template>
  <div >
    <h1>{{ list }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
  
    };
  },
  props:{
    list:{
      type:Number
    }
  },
};

接收父子间传过来的值（2）
props: [“ilist”]

子传父

子组件如下:

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

父组件如下：

<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<child v-on:childByValue="childByValue"></child>
methods: {
   childByValue: function (childValue) {
    // childValue就是子组件传过来的值
    this.name = childValue
   }
  }
}

兄弟组件传子

可以用过一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发$emit和监听$on来实现组件之间的通信和参数传递，类似window的全局自定义事件。类似与子传父，只不过是利用一个新的vue示例作为媒介，而不是当前vue示例(this)

// 注册 bus.js  
import Vue from 'vue';
export default new Vue;

// A 组件

<template>
  <div class='a'></div>
</template>

<script>
import Bus from 'bus.js' ;
export default {
  name: "a",
  created() {
    // 在需要的传递数据的时候调用sendData方法，这里模拟调用
    this.sendData();
  },
  methods: {
    sendData () {
      Bus.$emit('listenToA', 'hello');
    }
  }
}
</script>

// B 组件

<template>
  <div class='b'></div>
</template>

<script>
import Bus from 'bus.js';
export default {
  name: "b",
  monted() {
    Bus.$on('listenToA', this.getAData);
  },
  methods: {
    getAData (val) {
      console.log(`a组件传递过来的数据: ${val}`); // hello
    }
  }
}
</script>

可以通过Vuxe 来实现兄弟组件传值

• 安装Vuex npm install vuex --save
• 新建 store/store.js

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
//state数据跟根组件data写法一模一样。也是储存数据的。
const state = {
  AMsg: '',
  BMsg: ''
}
 
//actions里面全是方法，与mutations区别只有这儿的方法可以使用异步操作，mutations方法使用异步，调试会混乱。
const mutations = {
//state是默认传参，就是上面的state，就算写aaa也是指向state。n为组件传过来的参数。
  receiveAMsg(state, payload) {
    // 将A组件的数据存放于state
    state.AMsg = payload.AMsg
  },
  receiveBMsg(state, payload) {
    // 将B组件的数据存放于state
    state.BMsg = payload.BMsg
  }
}
 
export default new Vuex.Store({
  state,
  mutations
})

• main.js:

import store from ‘./store/store’
new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})

A 组件：

<template>
  <div id="childA">
    <h1>我是A组件</h1>
    <button @click="transform">点我让B组件接收到数据</button>
    <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      AMessage: "Hello，B组件，我是A组件"
    };
  },
  computed: {
    BMessage() {
      // 这里存储从store里获取的B组件的数据
      return this.$store.state.BMsg;
    },
    //或者
    ...mapState({
      BMessage: state => state.BMsg
    })
  },
  methods: {
    transform() {
      // 触发receiveAMsg，将A组件的数据存放到store里去
      this.$store.commit("receiveAMsg", {
        AMsg: this.AMessage
      });
    }
  }
};
</script>
 
<style>
div#childA {
  border: 1px solid black;
}
</style>

B 组件：

<template>
  <div id="childB">
    <h1>我是B组件</h1>
    <button @click="transform">点我让A组件接收到数据</button>
    <p>因为你点了A，所以我的信息发生了变化：{{AMessage}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      BMessage: "Hello，A组件，我是B组件"
    };
  },
  computed: {
    AMessage() {
      // 这里存储从store里获取的A组件的数据
      return this.$store.state.AMsg;
    }
    //或者
    ...mapState({
      AMessage: state => state.AMsg
    })
  },
  methods: {
    transform() {
      // 触发receiveBMsg，将B组件的数据存放到store里去
      this.$store.commit("receiveBMsg", {
        BMsg: this.BMessage
      });
    }
  }
};
</script>
 
<style>
div#childB {
  border: 1px solid green;
}
</style>