八种Vue组件间通讯方式合集(推荐)
4 浏览量
2020-12-28
16:04:58
上传
评论
收藏 181KB PDF 举报
八种八种Vue组件间通讯方式合集组件间通讯方式合集(推荐推荐)
前言前言
Vue 提供了各种各样的通讯,其中包括 兄弟间 的通讯和 非兄弟间 的通讯,借此机会做个总结，查阅起来方便。如果喜欢的话可以
帮忙点个赞 :+1: 或者关注一下 :yum:
1、、props
目录结构
components
├── Parent.vue // 父亲
├── Son1.vue // 儿子1
代码结构
在父亲组件中使用儿子组件，给儿子通过 :date="xxx" 单向传值
<template>
<div>
<div>爸爸:{{date}}</div>
<Son1 :date="date"></Son1>
</div>
</template>
<script>
import Son1 from "./son1";
export default {
components: { Son1 },
data() {
return {
date: 1,
};
},
};
</script>
儿子组件通过 props 接受父组件传过来的值
<template>
<div>儿子:{{date}}</div>
</template>
<script>
export default {
props: {
date: {
type: Number, //校验类型
default: "1",
},
},
};
</script>
2、、$emit
目录结构
components
├── Parent.vue // 父亲
├── Son1.vue // 儿子1
代码结构
子组件通过触自身的方法来触发 $emit 方法,再触发父组件的方法,通过 回调传参 的方式将修改的内容传递给父组件
<template>
<div>
<div>儿子:{{date}}</div>
<button @click="changeNum">修改</button>
</div>
</template>
<script>
评论0
最新资源