没有合适的资源?快使用搜索试试~ 我知道了~
正文 浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景。这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——props 这是组件数据沟通中最常见的场景:你让父组件掌握了数据源,然后传递给子组件,供子组件
资源推荐
资源详情
资源评论

格式:pdf 资源大小:68.6KB 页数:5


格式:pdf 资源大小:34.1KB 页数:1



















格式:xlsx 资源大小:107.8KB



格式:xlsx 资源大小:14.6MB






深入浅析深入浅析Vue不同场景下组件间的数据交流不同场景下组件间的数据交流
正文正文
浅谈Vue不同场景下组件间的数据“交流”
Vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景
论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运
用场景。这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现
父子组件间的数据交流父子组件间的数据交流
父子组件间的数据交流可分为两种:
1.父组件传递数据给子组件
2.子组件传递数据给父组件
父组件传递数据给子组件父组件传递数据给子组件——props
这是组件数据沟通中最常见的场景:你让父组件掌握了数据源,然后传递给子组件,供子组件使用
许多人会说,这很简单!用props嘛! 对,正因如此,它不是我要讲的主要内容,不过我们还是用代码简单过一遍:
父组件
<template>
<div id="father">
{{ '我是父组件' }}
<son :text = "text"></son>
</div>
</template>
<script>
import son from './son.vue'
export default {
data: function () {
return {
text: '从父组件传来的数据'
}
},
components: {
son: son
}
}
</script>
<style scoped>
</style>
子组件:
<template>
<div>
{{ '我是子组件,我接收了' + text }}
</div>
</template>
<script>
export default {
props: {
text: { type: String, default: '' }
}

}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
demo:
在这个demo里面,我们把“从父组件传来的数据”这一个字符串通过props传递给了子组件
如果我们希望在子组件中改变父组件的数据的话,可以在父组件中定义一个能改变父组件数据的函数,然后通过props将该函
数传递给子组件,并在子组件在适当时机调用该函数——从而起到在子组件中改变父组件数据的效果
子组件传递数据给父组件子组件传递数据给父组件
子组件传递数据给父组件子组件传递数据给父组件 方式一:回调传参方式一:回调传参
父组件:
<template>
<div id="father">
{{ '我是父组件,名称是' + componentName }}
<son :changeComponentName = "changeComponentName"></son>
</div>
</template>
<script>
import son from './son.vue'
export default {
data: function () {
return {
componentName: '组件A'
}
},
methods: {
changeComponentName: function (newComponentName) {
this.componentName = newComponentName
}
},
components: {
son: son
}
}
</script>
<style scoped>
#father div{
padding: 10px;
margin: 10px;
border: 1px solid gray;
}
</style>
子组件:
<template>
<div>
<p>我是子组件:一个button</p>
<button @click="() => changeComponentName(newComponentName)">
把父组件的名称修改为:彭湖湾的组件
</button>
</div>
</template>
<script>
export default {
data: function () {
return {
newComponentName: '彭湖湾的组件'
}
},
剩余7页未读,继续阅读
资源评论


weixin_38624628
- 粉丝: 8
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 初创型B2C电子商务xxx公司组织架构.doc
- 浅析高职院校信息化教学.docx
- 《单片机原理及应用设计》单片机系统1.ppt
- 基于无线传感器网络的大气环境监测系统.docx
- 浅析互联网经济中消费者权益的法律保护.docx
- 关于中职计算机课程教学的思考与探讨.docx
- 自动化标注工具,用来制作VOC格式的数据集
- 电子商务网站运营管理作业提供源码.doc
- VB程序设计模拟试卷3套.doc
- XX集团信息化建设规划书.doc
- 无线传感网络的实际应用与挑战
- 试论信息化技术在植物保护中的应用.docx
- 学生宿舍管理系统数据库课程设计方案doc.doc
- 远程网络视频监控系统方案-公共场所其他.docx
- 医院的计算机信息化管理和网络建设浅析.docx
- 工程项目管理目前存在的问题及对策.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
