Vue.js组件通信的几种姿势

日期：2020-05-12 栏目：程序人生浏览：次

写在前面

因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。

文章的原地址： https://github.com/answershuto/learnVue 。

在学习过程中，为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ，希望可以对其他想学习Vue源码的小伙伴有所帮助。

可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。

什么是Vue组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

Vue组件间通信

父组件向子组件通信

方法一：props

使用 props ，父组件可以使用props向子组件传递数据。

父组件vue模板father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

子组件vue模板child.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

方法二使用$children

使用 $children 可以在父组件中访问子组件。

子组件向父组件通信

方法一:使用 vue事件

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。

父组件vue模板father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

子组件vue模板child.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit('msgFunc');
    }
  }
}
</script>

转载注明出处：http://www.heiqu.com/1238.html

Vue.js组件通信的几种姿势

相关推荐