vue中非父子组件之间的传值

父子组件传值的问题,上面前面文章中已经讲过,不再赘述，这里来总结一下非父子组件传值的几种方式。

非父子组件间传值

1.通过父组件实现兄弟组件间互相传值

父组件

<template>

  <div id="app">

    <HelloWorld/>

    <goodbye/>

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

import goodbye from './components/goodbye.vue'

export default {

  name: 'App',

  components: {

    HelloWorld,goodbye

  },

}

</script>

子组件HelloWorld.vue

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <span v-if="number">{{msg}}goodbye告诉我是{{number}}</span>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg:"我是HelloWorld组件",

      number:"",

    }

  },

  created () {

    this.$parent.$on('wa',(e)=>{

      this.number=e;

    })

  }

}

</script>

子组件goodbye

<template>

  <div class="goodbye" @click="children1">

    <h1>{{ msg2 }}</h1>

  </div>

</template>

<script>

export default {

  name: 'goodbye',

  data() {

    return {

      msg2:"我是goodbye组件",

      num:1,

    }

  },

  methods: {

    children1() {

      this.$parent.$emit('wa',this.num++);

    }

  },

}

</script>

2.祖先组件向后代组件传值——provide 和 inject (主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

使用场景:祖先代给后代传值，反过来不成立

祖先组件app.vue

<template>

  <div id="app">

    <HelloWorld/>

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',

  provide(){//祖先向后代传值

     return {foo:this}

  },

  data() {

    return {

      ces:"测试",

    }

  },

  components: {

    HelloWorld

  },

}

</script>

helloword.vue组件

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <goodbye/>

  </div>

</template>

<script>

import goodbye from "./goodbye";

export default {

  name: "HelloWorld",

  components: {

    goodbye

  },

  data() {

    return {

      msg: "我是HelloWorld组件",

      number: ""

    };

  }

};

</script>

goodbye组件

<template>

  <div class="goodbye">

    <h1>{{ msg2 }}-{{foo.ces}}</h1>

  </div>

</template>

<script>

export default {

  name: 'goodbye',

  inject:['foo'],

  data() {

    return {

      msg2:"我是goodbye组件",

    }

  },

}

</script>

从以上可以看出app.vue和goodbye.vue是非父子组件，切记此方式只能是在祖先组件向后代传值。

3.任意两个组件间传值

创建一个Bus类负责事件派发，监听和回调管理(类似于上文1中的$parent);

1）创建一个单独的vue实例，并暴露出去。bus.js

    import Vue from "vue";

    let Bus=new Vue();

    export default  Bus;

2）helloworld.vue组件里进行事件派发

 <template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <span @click="emitnews">点击我</span>

  </div>

</template>

<script>

import Bus from '../bus.js';

export default {

  name: "HelloWorld",

  data() {

    return {

      msg: "我是HelloWorld组件",

      num:1

    };

  },

  methods: {

    emitnews() {

      Bus.$emit("add",this.num++);

    }

  }

};

</script>

2)goodbye.vue组件里进行事件监听

<template>

  <div class="goodbye">

    <h1>{{ msg2 }}</h1>

    <span>{{number}}</span>

  </div>

</template>

<script>

import Bus from "../bus.js";

export default {

  name: "goodbye",

  data() {

    return {

      msg2: "我是goodbye组件",

      number:"",

    };

  },

  created() {

    Bus.$on("add", e => {

      console.log(e);

      this.number=e;

    });

  }

};

</script>

4.父子组件传值除了以上方法外，还有vuex方法，即创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更。