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

2020-12-14 08:52:00 2017 2 编辑:深圳网站建设 来源:微信小程序开发

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

非父子组件间传值

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,通过它管理数据并通知组件状态变更。

深圳网站建设.png

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询