Vue2.0入门系列——父子组件间通信
1、子组件更新，父组件不变
点击“按钮”按钮，子组件数据被修改，父组件数据不变
=========>>>>>>
项目源代码，
<head>
<meta charset="UTF-8">
<title>v2.0父子组件通信</title>
<script src="./vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el: '#box',
data: {
aa: '我是父组件中的数据'
},
components: {
'child-com': {
props: ['msg'], //接收父组件传递过来的信息
template: '#child',
methods:{
change(){
this.msg='被修改'
}
}
}
}
});
};
</script>
<!--子组件修改不能改变父组件的修改-->
</head>
<body>
<template id="child">
<div>
<h3>我是子组件</h3>
<input type="button" value="按钮" @click="change">
<strong>{{msg}}</strong>
</div>
</template>
<div id="box">
父级： -> {{ aa }}
<child-com :msg="aa"></child-com>
</div>
</body>
2、子组件更新，父组件随之更新
点击“按钮”按钮，父子组件均数据被修改，
<head>
<meta charset="UTF-8">
<title>v2.0父子组件通信</title>
<script src="./vue.js"></script>
<script>
window.οnlοad=function(){
new Vue({
el: '#box',
data: {
giveData:{
aa: '我是父组件中的数据'
}
},
components: {
'child-com': {
props: ['msg'], //接收主组件传递过来的信息
template: '#child',
methods:{
change(){
//this.msg='被修改'
this.msg.aa='被修改'
}
}
}
}
});
};
</script>
<!--子组件修改不能改变父组件的修改-->
</head>
<body>
<template id="child">
<div>
<h3>我是子组件</h3>
<input type="button" value="按钮" @click="change">
<strong>{{msg.aa}}</strong>
</div>
</template>
<div id="box">
父级： -> {{ giveData.aa }}
<child-com :msg="giveData"></child-com>
</div>
</body>
转载于:https://www.cnblogs.com/sunnyyangwang/p/10286601.html
Vue2.0入门系列——父子组件间通信相关推荐
- 【Vue父子组件间通信】
Vue父子组件间通信 父子组件通信 父传子 (props) 子传父 (自定义事件) 完整代码 效果 父子组件通信 父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
- vue -- watch侦听器与父子组件间通信
watch侦听器 方式一 1.默认有两个参数 newValue与oldValue 2.如果是对象类型那么拿到的是代理对象 如果要进行深度监听 需要加上 deep : true 如果想要第一次渲染直接执 ...
- vue 父子组件间通信
前言 在vue项目中,封装组件,涉及到父子组件的传值,本文主要讲解父子组件之间传值的方法. 一.props / $emit 适用于父子组件通信,单向数据流,这种方法是 vue 组件的基础. 二.ref ...
- Vue父子组件间通信
组件是vue.js最强大的功能之一,但组件之间的作用域是相互独立的,这就意味着不同组件之间的数据是无法相互引用的.为实现组件之间的通信,vue为我们提供了三种方式:prop.ref.emit. 首先创 ...
- Vue3父子组件间传参通信
Vue3 父子组件间通信 前言 一.父传子 defineProps 二.子传父 defineEmits 三.子组件暴露属性给父组件 defineExpose 四.依赖注入Provide / Injec ...
- vue3-父子组件间通信
文章目录 方案一:props/emits props:父组件->子组件 emits:子组件->父组件 方案二:v-model/ emits 方案三:ref/emits 应用场景 在实际业务 ...
- Vue实现组件间通信的七种方式
1. props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信: 父传子:父组件通过import引入子组件,并注册,在子组件标签上添加要传递的属 ...
- vue中组件间通信的6种方式
前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的. 除了使用vuex外还有下面6种组件间 ...
- 深入浅出，带你看懂Vue组件间通信的8种方案
前言 Vue种组件通信的情况有多种,总结有以下4种情况: 父子组件间通信 兄弟组件间通信 祖孙后代间通信 无关系组件间通信 8种解决方案 通过 props 传递 通过 $emit 触发自定义事件 使用 ...
最新文章
- python连接mysql很慢 2.7_Python 2.7 学习笔记 访问mysql数据库
- 谷歌40人发表59页长文：为何真实场景中ML模型表现不好？
- 阿里云峰会 | 统一召回引擎在搜索场景的应用实践
- CodeForces - 1549F1 Gregor and the Odd Cows (Easy)(几何+数论)
- 图片裁剪功能集成优化
- Mybatis-plus之RowBounds实现分页查询
- python3 csv读写_在python3中读取、更新和写入更新的CSV文件
- C#解析JSON数据
- Python实战从入门到精通第十一讲——可接受任意数量参数的函数
- JMeter(五)--检查点
- Linux操作系统中sed工具常见用法
- ios游戏开发 Sprite Kit教程：初学者 3
- sas 分析家模块 安装,SAS9.3 13.3G完整版安装过程与模块介绍
- MeGUI 压片之新手上路
- android 支付宝私钥加密,支付宝支付密钥RSA1升级到RSA2
- R先生一步步教你用EasyExcel导出包含多图片的Excel
- 自动驾驶——Smooth Local Planning
- android 延时拍照,手机如何延时拍摄 手机延时拍摄技巧有哪些
- 【科研】如何在读研的道路上快速失败
- 张家界市4月份计算机职称,2017年4月张家界计算机应用能力考试报名时间4月10日起...
热门文章
- linux启动盘制作工具_开源免费的国产多系统启动盘制作工具：Ventoy
- vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
- 华为多臂路由_[分享]华为 AR路由 策略路由 多WAN环境下指定出口 | 霸王硬上弓's Blog...
- Layui表单账号注册校验密码是否一致
- [Ext JS 7]7.4 样式主题(Theme)
- [过年菜谱之]清蒸鲈鱼
- web小知识与问题串烧(html,css,js)
- oracle date 截取年月,在Oracle中，可用于提取日期时间类型特定部分（如年、月、日、时、分、秒）的函数有那些...
- 苹果app商品定价_苹果官网闹乌龙，千元产品变百元！多人闻风薅羊毛！
- 华为哪款手表支持鸿蒙,华为Watch 3最早或于5月发布 采用鸿蒙系统并支持eSIM