谈一谈使用webpack开发时，Vue组件之间的数据传递

  我们在学习Vue的时候，难免会使用各个组件之间传递数据。

  先来介绍一下Vue中组件传递的方式，有父组件传递给子组件数据，子组件传递给父组件数据，父组件直接获取子组件中数据，子组件直接获取父组件数据以及兄弟组件之间传递数据这五种方式。

  接下来介绍一下这五种组件传递数据的方式在webpack中如何使用的。

一、父组件传递给子组件数据

  第一步，新建一个子组件放在components文件里，随便写的内容。

  第二步，在父组件中引入子组件，注册组件，使用组件。

  这里说一个题外话，关于组件的命名，定义组件名的方式有两种：使用 kebab-case（短横线分隔命名）和使用 PascalCase（驼峰式命名）。我这里使用的是PascalCase（驼峰式命名），如果想详细了解组件命名，请点击这里。

  第三步，在父组件中使用自定义属性传递数据。

  第四步，在子组件中使用props接受父组件传递过来的数据。

  这里说一个题外话，props接受数据的两种方式：数组和对象。上面是数组，下面是对象。

  这种方式可以过滤掉一些数据。我这里传递的数据类型是字符串。如果传递的是对象或者数组的时候，那么default会略有不同。

可以使用ES6简写成：

  如果想详细了解props接收数据，请点击这里

  我们使用钩子函数mounted在控制台看一下。

二、子组件传递给父组件数据

  第一步，在子组件中通过使用$emit()自定义方法，传递数据。

  第二步，在父组件中通过自定义事件，接收参数并在控制台中查看。

 

三、父组件直接获取子组件中数据

  在父组件中通过给子组件设置ref属性，从而通过$ref获取数据。

 

四、子组件直接获取父组件中数据

  在子组件中通过$parent获取父组件数据

 

 

五、兄弟组件之间传递数据

  第一步，新建一个bus.js文件夹放在src目录下。

  第二步，在bus.js里创建一个vue实例。

  第三步，在components目录下新建一个组件demo2并在里面引入总线bus.js文件，并通过bus.$emit()作为数据发送方，发送数据。

  第四步，在共同的父组件中引入子组件demo2.vue，并注册使用。

  第五步，在接收数据的子组件（demo.vue）里引入总线bus.js文件，并通过bus.$on()接收数据。

总结

  以上就是使用webpack开发时，Vue组件之间的数据传递的几种方式，关于兄弟之间的传递数据也有其他方法，比如Vuex,这里不去细说了。

  哈哈哈，接下来介绍一下在Vue.js官网上学习的小技巧。

  先打开官网

  都是英文，把它变成中文。在网址https://vuejs.org/里的vuejs前面加上cn.就是中文版本了。

  还没有完。。。。。。

  点击进去右上角菜单生态系统里的Vuex里去

   怎么又是英文的呢？

这个时候加cn.不能变成中文的了。

这个时候我们在https://vuex.vuejs.org/的后面加上/zh就又是中文的了，

哈哈哈哈~~~~

中文的官网方便我们快速的学习Vue知识。