vue 组件传值常用5种

vue 组件传值

1、父组件给子组件传值

父组件:
<template>
   <child :name="name"></child>
</template>
<script>
import child from "./child.vue"
  export default {
     components: {child},
     data(){
      return {name:"二哈"}
     }
  }
</script>

子组件：

<template>
  <div>{{name}}</div>
</template>
<script>
  export default {
    props:["name"]
    或者：props:{
	    name:{
	    }
    }
  }
</script>

. 2. 子组件给父组件

父组件：

<template>
  <child @childToParent="reviceSondata"></child>
</template>
<script>
import child from "./child.vue"
  export default {
    components: {child},
    methods:{
      reviceSondata(data){
        console.log(data);
      }
    }
  }
</script>

子组件：

<template>
   <button @click="dataTofather">点击</button>
</template>
<script>
  export default {
    data () {
      return {
        message: '啦啦啦啦'
      }
    },
    methods:{
      dataTofather(){
        this.$emit("childToParent",this.message,true);
      }
    }
  }
</script>

3、vuex

store.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    headImg: JSON.parse(sessionStorage.getItem('headImg')) || ""
  },
  mutations: {
    newImg(state, msg){
      sessionStorage.setItem('headImg', JSON.stringify(msg))
      state.headImg = msg;
    }
  }
})

export default store

main.js中引入vuex

import Vue from 'vue';
import Vuex from 'vuex';
import store from './vuex/store';
Vue.use(Vuex);
var v = new Vue({
  el: '#app',
  router,
  store,
  components: {index},
  template: '<index/>',
  created: function () {

  }
})

传值：this.$store.commit("newImg", value);
取值：this.$store.state.headImg

4. 中央bus总线
   原理上就是建⽴立⼀一个公共的js⽂文件，专⻔门⽤用来传递消息

bus.js

import Vue from 'vue'
const Bus = new Vue();
export default Bus;

在需要传递消息的地⽅方引⼊入

mport Bus from './util/bus'
methods: {
  passMsg () {
    Bus.$emit('msg', 'i am from app')
  }
},

   传递消息，在需要接受消息的地方使用bus.$on接受消息

mounted () {
    Bus.$on('msg', (val) => {
      this.childMsg = val
    });

5.provide和inject使用
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据，子组件通过props属性接收，一旦组件层级变多时，采用这种方式一级一级传递值非常麻烦，而且代码可读性不高，不便后期维护。

vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据，子孙组件通过inject注入祖父组件传递过来的数据。

//父组件
import Child from './Child'
export default {
  name: 'Parent',
  //传递的数据
  provide: {
  
	nameFromParent: 'Kevin'
  }
  components: {
    Child
  }
}

//所有子组件，包括孙组件
data() {
            return {
                name: 'Two sons',
                msg:'',
            }
        },
        inject:['nameFromParent'],
        mounted(){
            this.msg = this.nameFromParent;
        }