vue中 关于$emit的用法（--父子组件传值--平行组件之间this.$store.commit）

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。

在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//父组件   <template>   <div>    <h1>我是父组件！</h1>    <child></child>   </div> </template>   <script> import Child from '../components/child.vue' export default {   components: {Child}, } </script>

?

1 2 3 4 5 6 7 8

//子组件   <template>   <h3>我是子组件！</h3> </template>   <script> </script>

这两部分的代码都很清晰明了，父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签<child>的形式嵌进父组件了。运行father.vue后的效果是这样的：

示例效果一

1.通过prop实现通信

子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：

（1）静态传递

子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!-- 父组件 -->   <template>   <div>    <h1>我是父组件！</h1>    <child message= "我是子组件一！" ></child> //通过自定义属性传递数据   </div> </template>   <script> import Child from '../components/child.vue' export default {   components: {Child}, } </script>

?

1 2 3 4 5 6 7 8 9 10

<!-- 子组件 -->