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 ...
随机推荐
- Hadoop详解(04)-Hdfs
Hadoop详解(04)-Hdfs HDFS概述 HDFS产出背景及定义 背景:随着数据量越来越大,在一个操作系统存不下所有的数据,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,迫切需 ...
- 让 Win8.1 微软拼音新体验模式支持 Metro 应用
内容回顾: [1]十个步骤找回 Win8 中的微软拼音新体验模式 [2]发布个工具,一键恢复Win8/8.1中的微软拼音长句模式(新体验模式) 在 [1] 中,我们找回了 Win8 里的微软拼音新体验 ...
- [WPF]限制程序单例运行
代码 System.Threading.Mutex mutex; protected override void OnStartup(StartupEventArgs e) { bool ret; m ...
- MySQL 表的创建、复制、修改与删除
MySQL中如何利用代码完成表的创建.复制.修改和删除. 一.创建表 --创建新表,如果存在则覆盖 drop table [if exists] 表名; --创建新表,如果存在则返回 create t ...
- wsl2和ArchLinux的安装
版权声明:本文章参考了哔哩哔哩稿件BV1sW411v7VZ,如侵权请主动联系删除 1.Wsl2的安装 启用适用于 Linux 的 Windows 子系统 在终端运行:dism.exe /online ...
- Grafana 系列文章（八）：Grafana Explore 中的 Inspector
️URL: https://grafana.com/docs/grafana/latest/explore/explore-inspector/ Description: Explore 中的检查器 ...
- 11月30日内容总结——前端简介、http协议概念、html协议概念及基础知识和部分标签的讲解
目录 一.前端与后端的概念 什么是前端开发? 什么是后端? 学习前端的目的 前端三剑客 二.前端前戏 三.HTTP协议 1.四大特性 2.报文格式 3.响应状态码 四.HTML概览 1.HTML简介 ...
- 一次代码重构 JavaScript 图连通性判定
简介 说重构其实就是整理了代码,第一次自己手写写的很丑,然后看了书上写的,虽然和书上的思路不同但是整理后几乎一样漂亮 效果 整体代码如下 class Node { AdjNodes = new Set ...
- ROS多机通讯
1.主机: sudo /etc/hosts 写入从机的地址和用户名: 192.168.31.14 raspi2 2.从机 sudo /etc/hosts 写入主机的地址和用户名 192.168. ...
- 五大数据类型 - 字符串 - 列表 list - 集合set - 有序集合 - 哈希 hashMap
基础知识 redis默认有16个数据库:默认使用的是第0个. 可以使用select num切换 查看DB大小 DBSIZE 查看所有的key **keys ** 清空当前数据库 flushdb 清空全 ...