• 上一篇: 如何开发一个基于 Vue 的 ui 组件... 下一篇:Nuxt.js之自动路由原理

<template>
  <div>
    <h1>Parent</h1>
    <child :name="childName" />
    <button @click="changeChildName">change the child name</button>
  </div>
</template>
<script>
import Child from './Child';

export default {
  components: {
    Child,
  },
  data() {
    return {
      childName: 'child name is what?',
    };
  },
  methods: {
    changeChildName() {
      this.childName = 'no name';
    },
  },
};
</script>

<template>
  <div>{{name}}</div>
</template>
<script>
export default {
  props: ['name'],
};
</script>

<template>
  <div>
    <h1>Event Parent</h1>
    <child :name="childName" @changeParent="changeChildName" />
  </div>
</template>
<script>
import Child from './Child';

export default {
  components: {
    Child,
  },
  data() {
    return {
      childName: 'child name is what?',
    };
  },
  methods: {
    changeChildName() {
      this.childName = 'no name';
    },
  },
};
</script>

<template>
  <div>
    {{name}}
     <button @click="changeParentData">change the parent name</button>
  </div>
</template>
<script>
export default {
  props: ['name'],
  methods: {
    changeParentData() {
      this.$emit('changeParent');
    },
  },
};
</script>

<template>
  <div>
    <h1>Props Parent</h1>
    <child :name="childName" :changeName="changeChildName" />
  </div>
</template>
<script>
import Child from './Child';

export default {
  components: {
    Child,
  },
  data() {
    return {
      childName: 'child name is what?',
    };
  },
  methods: {
    changeChildName() {
      this.childName = 'no name';
    },
  },
};
</script>

Child.vue

<template>
  <div>
    <div>{{name}}</div>
    <button @click="changeName">Change Name</button>
  </div>
</template>
<script>
export default {
  props: ['name', 'changeName'],
};
</script>

以 props 的这种方式大家可以尝试实现一下是一种新的思路。

非父子组件间的通信

上述三个实例都在讲述父子组件的通信，那么不相关的组件该如何通信呢？可以创建一个 Vue 的实例作为桥来中转事件。
eventHub.js

import Vue from 'vue';

export default new Vue();

Child01.vue

<template>
  <div>
    <div>我是哥哥，我来触发事件</div>
    <button @click="clickButton">CLICK</button>
  </div>
</template>
<script>
import EventHub from './eventHub';

export default {
  methods: {
    clickButton() {
      EventHub.$emit('emitevent');
    },
  },
};
</script>

Child02.vue

<template>
  <div>
    <div>我是弟弟，我来监听哥哥触发的事件来改变自己的数据</div>
    <span>{{title}}</span>
  </div>
</template>
<script>
import EventHub from './eventHub';

export default {
  created() {
    EventHub.$on('emitevent', () => {
      this.title = 'Hi Brother';
    });
  },
  data() {
    return {
      title: 'Hello EveryOne~',
    };
  },
};
</script>

效果如图：

总结

父组件改变子组件的数据利用正常单向数据流的特性即可，子组件改变父组件的数据可以通过事件或者函数 props 两种方式实现，非父子组件通信则利用 EventHub 中转一下。

实例代码

欢迎大家指正批评、或留言。QQ群：538631558

【开发环境推荐】Cloud Studio 是基于浏览器的集成式开发环境，支持绝大部分编程语言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，无需下载安装程序，一键切换开发环境。 Cloud Studio提供了完整的 Linux 环境，并且支持自定义域名指向，动态计算资源调整，可以完成各种应用的开发编译与部署。

脚本宝典总结

以上是脚本宝典为你收集整理的VUE组件间的数据传递全部内容，希望文章能够帮你解决VUE组件间的数据传递所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。