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 ...
随机推荐
- Redis RDB 与AOF
参考书籍<Redis设计与实现> 一丶为什么redis需要持久化 redis 作为一个内存数据库,如果不想办法将存储在内存中的数据,保存到磁盘中,那么一旦服务器进程退出,那么redis数据 ...
- [机器学习] PCA （主成分分析）详解
转载于https://my.oschina.net/gujianhan/blog/225241 一.简介 PCA(Principal Components Analysis)即主成分分析,是图像处理中 ...
- [深度学习] fast-reid入门教程
fast-reid入门教程 ReID,全拼为Re-identification,目的是利用各种智能算法在图像数据库中找到与要搜索的目标相似的对象.ReID是图像检索的一个子任务,本质上是图像检索而不是 ...
- 纸张尺寸【第十三届蓝桥杯省赛C++C组】
纸张尺寸 在 ISO 国际标准中定义了 \(A0\) 纸张的大小为 \(1189mm×841mm\),将 \(A0\) 纸沿长边对折后为 \(A1\) 纸,大小为 \(841mm×594mm\) ,在 ...
- [C#]C++/CLI中^的含义
例子 // here normal pointer P* ptr = new P; // usual pointer allocated on heap P& nat = *ptr; // o ...
- Python3+Selenium3自动化测试-(六)
这里来说一说selenium中的等待方式,其实在webdriver只有两种类型等待方式,显式等待和隐式等待,之前是在程序运行过程中使用time模块中的sleep进行代码的休眠进行强制等待,是显式等待中 ...
- Stream流中的常用方法_Foreach-Stream流中的常用方法_filter
Stream流中的常用方法_Foreach 流模型的操作很丰富,这里介绍一些常用的API.这些方法可以被分成两种︰·延迟方法∶返回值类型仍然是Stream,接口自身类型的方法,因此支持链式调用.(除了 ...
- Java入门与进阶P-3.7+P-3.8
猜数游戏 让计算机来想一个数,然后让用户来猜,用户每输入一个数,就告诉它这是大了还是小了,知道用户猜中为止,最后还要告诉用户它猜了多少次 因为需要不断重复让用户猜,所以需要用到循环 在实际写出程序之前 ...
- ADC-单通道DMA到多通道DMA ADC采集修改事项
1. 使能通道IO,因为从单通道到多通道,需要添加规则转换通道数,故需要使能扫描模式,否则只能扫描第一个通道: 2. DMA模式配置需修改为循环传输模式,否则只转换一次: 3. 开启ADC规则转换通道 ...
- Solon 的插件热插拨管理机制（H-Spi）
插件热插拨管理机制,简称:H-Spi.是框架提供的生产时用的另一种高级扩展方案.相对E-Spi,H-Spi 更侧重隔离.热插热拨.及管理性. 应用时,是以一个业务模块为单位进行开发,且封装为一个独立插 ...