Vue基础 · 父子组件之间的交互（5）
1、父子组件交互
<body>
<div id="app"> <!--子组件接收到”change"方法，绑定父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd">></number>
<div>父组件：<sapn>{{count}}</sapn></div> </div> <script src="../js/vue.js"></script> <script>
Vue.component('number',{
template:'<div>子组件：<span @click="add">{{count}}</span>\</div>',
data:function () {
return{
count:0
}
},
methods:{
add:function () {
this.count++
//向外触发一个事件，是“change"事件
this.$emit('change')
}
}
}) new Vue({
el:'#app',
data:{
//父组件使用的count
count:0
},
methods: {
countAdd:function () {
this.count++
}
}
}) </script>
</body>
2、子组件像父组件传递数据，通过$emit触发事件的方式传递
<div id="app">
<!--子组件接收到”change"方法，绑定父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd">></number>
<div>父组件：<sapn>{{count}}</sapn></div>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number',{
template:'<div>子组件：<span @click="add">{{num}}</span>\</div>',
data:function () {
return{
num:0
}
},
methods:{
add:function () {
this.num++
//向外触发一个事件，是“change"事件
//还可传递值：this.num
this.$emit('change',this.num)
}
}
})
new Vue({
el:'#app',
data:{
//父组件使用的count
count:0
},
methods: {
//num:接收到全局组件中this.$emit（this.num）
countAdd:function (num) {
//拿到返的值进行相加
this.count += num
}
}
})
</script>
3、父组件向子组件传递值
<body>
<div id="app">
<number num2="9" num3="10"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number',{
// 父组件向子组件传递值，存在单向数据流
props:['num2','num3'],
template:'<div>子组件：<span>{{num2}}--{{num3}}</span></div>',
data:function () {
return{
}
}
})
new Vue({
el:'#app',
data:{
//父组件使用的count
count:0
}
})
</script>
</body>
使用v-bing方法绑定引用后再进行传递
<body>
<div id="app">
<number :num2="number2" num3="10"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number',{
// 父组件向子组件传递值，存在单向数据流
props:['num2','num3'],
template:'<div>子组件：<span>{{num2}}</span></div>',
data:function () {
return{
}
}
})
new Vue({
el:'#app',
data:{
number2:99
}
})
</script>
父组件向子组件传值，存在单向数据流
父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
<body>
<div id="app">
<number :num2="number2"></number>
<number :num2="number2"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number', {
// 父组件向子组件传递值，存在单向数据流
props: ['num2'],
template: '<div>子组件：<span @click="add">{{num2}}</span></div>',
data: function () {
return {
}
},
methods: {
add:function () {
this.num2++
}
}
})
new Vue({
el: '#app',
data: {
number2: 99
},
})
</script>
</body>
如何解决上边的问题：
- 把数据进行分离
<body>
<div id="app">
<number :num2="number2"></number>
<number :num2="number2"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number', {
// 父组件向子组件传递值，存在单向数据流
// props：数据想要修改，在data中进行修改
props: ['num2'],
template: '<div>子组件：<span @click="add">{{count}}</span></div>',
data: function () {
return {
count:this.num2
}
},
methods: {
add:function () {
this.count++
}
}
})
new Vue({
el: '#app',
data: {
number2: 99
},
})
</script>
</body>
4、全局组件中的props的字典格式使用
<body>
<div id="app">
<number></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number', {
// 父组件向子组件传递值，存在单向数据流
props: {
'num2':{
// 默认值200
default:'200',
// 定义传过来的类型，支持一次定义多种类型，
// 如：定义为Number，传过来必须是数值类型，要不就会报错，只是在console中报错，不影响正常使用
type:[Number,String],
//是否必传,布尔类型：true、false
require:true
}
},
template: '<div>子组件：<span @click="add">{{count}}</span></div>',
data: function () {
return {
count:this.num2
}
},
methods: {
add:function () {
this.count++
}
}
})
new Vue({
el: '#app',
data: {
number2: 99
},
})
</script>
</body>
Vue基础 · 父子组件之间的交互（5）的更多相关文章
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue之父子组件之间的通信方式
(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue非父子组件之间的通信
https://www.cnblogs.com/chengduxiaoc/p/7099552.html //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
随机推荐
- [OpenCV实战]21 使用OpenCV的Eigenface
目录 1 PCA 1.1 方差是什么 1.2 什么是PCA 1.3 什么是矩阵的特征向量和特征值? 1.4 如何计算PCA 2 什么是EigenFaces? 2.1 将图像作为向量 2.2 如何计算如 ...
- curl请求https报错
curl 一般情况下请求http时不会有问题 但是请求 https 协议的链接时会报错,如下: curl: (60) SSL certificate problem: unable to get lo ...
- [LeetCode]至少是其他数字两倍的最大数
题目 代码 class Solution { public: int dominantIndex(vector<int>& nums) { vector<int> so ...
- P5683 [CSP-J2019 江西] 道路拆除
简要题意 给你一个 \(m\) 条边 \(n\) 个点的无向图.你需要去掉一些边,使得 \(1 \to s_1,1 \to s_2\) 连通,且 \(1 \to s_1\) 的最短路径长度小于 \(t ...
- （9）go-micro微服务Redis配置
目录 一 go-redis介绍 二 go-redis安装 三 redis初始化连接 四 存储mail邮件 五 存储token 六 最后 一 go-redis介绍 Redis(Remote Dictio ...
- 引子 - 实现轻量的 ioc 容器
IoC 反转控制原则也被叫做依赖注入 DI, 容器按照配置注入实例化的对象. 假设 A 的相互依赖关系如下图, 如何将 A 对象实例化并注入属性. 本文将实现一个轻量化的 IoC 容器, 完成对象的实 ...
- Java 进阶P-5.3+P-5.4
封装 增加可扩展性 可以运行的代码!=良好的代码 对代码做维护的时候最能看出代码的质量 如果想要增加一个方向,如down或up 用封装来降低耦合 Room类和Game类都有大量的代码和出口相关 尤其是 ...
- 创建型模式 - 原型模式Prototype
孩子生来没娘的NT审核机制,又开始说我涉及到广告了,我涉及到什么广告了?我接着发. 学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 所属:创建型模式 原型模式 一般会和 工场 ...
- c++ 递推算法
各位大佬不妨先点个赞再看文章! 递推法是一种重要的数学方法,在数学的各个领域中都有广泛的运用,也是计算机用于数值计算的一个重要算法.这种算法特点是:一个问题的求解需一系列的计算,在已知条件和所求问题之 ...
- Linux备份服务
备份服务 一.备份服务概述 备份服务:需要使用脚本,打包备份,定时任务 通过rsyncd服务,不同主机之间进行数据传输 rsyncd特点: rsync是个服务,也是命令 使用方便,有多种模式 传输数据 ...