vue.js入门（3）——详解组件通信

本文介绍vue.js组件，具体如下：

5.2 组件通信

尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：

1.这让父组件与子组件紧密地耦合；

2.只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

每个Vue实例都是一个事件触发器：

$on()——监听事件。
$emit()——把事件沿着作用域链向上派送。（触发事件）
$dispatch()——派发事件，事件沿着父链冒泡。
$broadcast()——广播事件，事件向下传导给所有的后代。

5.2.1 监听与触发

v-on监听自定义事件：

Messages: {{ messages | json }}

父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件：

在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰v-on 。例如：

5.2.2 派发事件——$dispatch()

Messages: {{ messages | json }}

@H_301_126@

子组件的button元素绑定了click事件，该事件指向notify方法

子组件的notify方法在处理时，调用了$dispatch，将事件派发到父组件的child-msg事件，并给该该事件提供了一个msg参数

父组件的events选项中定义了child-msg事件，父组件接收到子组件的派发后，调用child-msg事件。

5.2.3 广播事件——$broadcast()

<template id="child-component"&gt;
  <ul>
    <li v-for="item in messages"&gt;
      父组件录入了信息：{{ item }}
    </li>
  </ul>
</template>

和派发事件相反。前者在子组件绑定，调用$dispatch派发到父组件；后者在父组件中绑定，调用$broadcast广播到子组件。

5.2.4 父子组件之间的访问

父组件访问子组件：使用$children或$refs
子组件访问父组件：使用$parent
子组件访问根组件：使用$root

$children：

<template id="parent-component"&gt;
  <child-component1></child-component1>
  <child-component2></child-component2>
  <button v-on:click="showChildComponentData"&gt;<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>子组件的数据</button>
</template>

<template id="child-component1"&gt;
  <h2>This is child component 1</h2>
</template>

<template id="child-component2"&gt;
  <h2>This is child component 2</h2>
</template>
<script src="js/vue.js"&gt;</script>
<script>
  Vue.component('parent-component',{
    template: '#parent-component',components: {
      'child-component1': {
        template: '#child-component1',data: function() {
          return {
            msg: 'child component 111111'
          }
        }
      },'child-component2': {
        template: '#child-component2',data: function() {
          return {
            msg: 'child component 222222'
          }
        }
      }
    },methods: {
      showChildComponentData: function() {
        for (var i = 0; i < this.$children.length; i++) {
          alert(this.$children[i].msg)
        }
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

$ref可以给子组件指定索引ID：

<template id="parent-component"&gt;
  <!--<child-component1></child-component1>
  <child-component2></child-component2>-->
  <child-component1 v-ref:cc1></child-component1>
  <child-component2 v-ref:cc2></child-component2>
  <button v-on:click="showChildComponentData"&gt;<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>子组件的数据</button>
</template>

<template id="child-component1"&gt;
  <h2>This is child component 1</h2>
</template>

<template id="child-component2"&gt;
  <h2>This is child component 2</h2>
</template>
<script src="js/vue.js"&gt;</script>
<script>
  Vue.component('parent-component',methods: {
      showChildComponentData: function() {

// for (var i = 0; i < this.$children.length; i++) {
// alert(this.$children[i].msg)
// }
alert(this.$refs.cc1.msg);
alert(this.$refs.cc2.msg);
}
}
})
new Vue({
el: '#app'
})

效果与$children相同。

$parent：

<template id="parent-component"&gt;
  <child-component></child-component>
</template>

<template id="child-component"&gt;
  <h2>This is a child component</h2>
  <button v-on:click="showParentComponentData"&gt;<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>父组件的数据</button>
</template>

<script src="js/vue.js"&gt;</script>
<script>
  Vue.component('parent-component',components: {
      'child-component': {
        template: '#child-component',methods: {
          showParentComponentData: function() {
            alert(this.$parent.msg)
          }
        }
      }
    },data: function() {
      return {
        msg: 'parent component message'
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

如开篇所提，不建议在子组件中修改父组件的状态。

5.2.5 非父子组件通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

// 触发组件 A 中的事件
bus.$emit('id-selected',1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected',function (id) {
// ...
})

在更多复杂的情况下，可以考虑使用专门的状态管理模式。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/vue/43970.html