5分钟上手vue组件开发

93 阅读 0 评论 62 点赞

我是靠谱客的博主怕黑鸭子，最近开发中收集的这篇文章主要介绍5分钟上手vue组件开发，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对于许多刚开始学习vue的朋友，可能对于vue的父子组件之间如何通信不是很了解，今天作者就vue父子组件之间的通信做了一个小的demo来方便大家快速的理解父子组件通信原理，下面将结合代码对父子组件通信进行分析，希望可以帮助到需要的朋友。（项目变大以后相信大家会用到组件开发的，因为组件开发对项目的后续开发会有着较大的意义）

先来试一下小的demo，感受一下父子组件之间的通信是个啥

demo: 在线 Demo

父组件向子组件传值（father.vue部分代码）

父组件向子组件传值，主要包括在父组件中引入子组件，将值传给子组件的过程（跟着下面的第一、二、三步去看）。
father.vue部分的代码如下（样式代码未包括在内）：

<template>
<div class="father">
<div>
<div class="box">
<div>
{{message}}
</div>
<button class="button" @click="sendToChild">父传子</button>
</div>
<!--调用子组件，并绑定要传给子组件的参数，并指定接收子组件传值的方法（第三步）-->
<child :toChild = 'toChild' @getChildData = 'getChildData'></child>
</div>
</div>
</template>
<script>
import Child from './components/child'
// 该处引入子组件（第一步）
export default {
components: {
// 该处将组件挂载到父组件（第二步）
Child
},
data () {
return {
message: '我是父组件',
toChild: ''
}
},
methods: {
// 传值到子组件的函数
sendToChild: function () {
this.toChild = '我是父组件传给子组件的值'
},
// 接收子组件传值的函数
getChildData: function (val) {
this.message = val
}
}
}
</script>

如果导入的子组件为childComponent样式，在中要写成（因为html对大小写不敏感，具体请参见https://cn.vuejs.org/v2/guide/components-registration.html）

子组件接收父组件的值并向父组件传值（child.vue部分代码）

子组件接收父组件传值，主要包括接收父组件传值，并根据父组件值的变化而变化，并且在该部分代码中包含了子组件向父组件传值的代码（vue本不支持子组件修改父组件的数据，防止恶意修改页面，也防止组件太多导致管理混乱，但是仍可以通过$emit来实现向父组件的传值）。

<template>
<div class="child">
<div>
{{message}}
</div>
<button class="button" @click="sendToFather">子传父</button>
</div>
</template>
<script>
export default {
props: ['toChild'],
// 获取父组件传值（第一步）
data () {
return {
message: '我是子组件'
}
},
watch: {
toChild (val) {
// 该处监听父组件传值是否变化，若变化则赋新值（第二步）
this.message = val
}
},
methods: {
// 向父组件传值函数
sendToFather: function () {
this.$emit('getChildData', '我是子组件传给父组件的值')
// 该处实现将子组件的值传给父组件（第三步）
}
}
}
</script>