Vue的自定义组件之间的数据传递
一，父级传向子级
1，在子级的属性中添加props:['myname',......]，参数可以传多个，看具体而定；
2，在父级data中定义好需要传递的变量数据，例如name:"rose";
3，在父级template中的子级引用的标签内，利用v-bind:绑定需要传递的数据，例如<son v-bind:myname="name" .....></son>，此时的myname对应子级props所定义的myname，而name对应父级data里的name；
4，此时，在子级中引用{{myname}}就可以得到父级所传递的数据："rose"。
例子如下：
<body>
<div id="app">
<father></father>
</div>
<script>
// 创建父级组件
Vue.component('father', {
template: `
<div class="box">
<h3>父级组件</h3>
<p>我儿子的名字叫{{mysonname}}</p>
<son :myname="mysonname"></son>
</div>
`,
// 这里的data要求是函数模式,并且返回一个全新的对象
data() {
return {
mysonname: "Jack",
}
},
// 创建子级组件
components: {
son: {
template: `
<div>
<h4>子级组件</h4>
<p>我的名字叫{{myname}}</p>
</div>
`,
// props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
props: ['myname', 'a', 'b']
}
}
}) var vm = new Vue({
el: '#app',
data: { }
})
</script>
</body>
二，子级向父级传递参数
1，在子组件方法体利用this.$emit('emitName',this.name)把数据发送到父组件;
2，在父组件方法体中定义方法，例如getName(value){}，用于接收数据;
3，在父组件引用的子组件中写入@emitName="getName"，例如<sonCom @emitName="getName"></conCom>，"@emitName"中的"emitName"对应子组件this.$emit()中的第一个参数'emitName'；
4，父组件调用方法getName(value){ }，value就等于子组件传过来的this.name;
例子如下：
// 创建父级组件
Vue.component('father', {
template: `
<div class="box">
<h3>父级组件</h3>
<p>儿子，3 + 5 = {{answer}}</p>
<son @tellAns="getAns"></son>
</div>
`,
// 这里的data要求是函数模式,并且返回一个全新的对象
data() {
return {
answer: "?"
}
},
methods: {
getAns(res) {
// console.log(res);
this.answer = res;
}
},
// 定义子级组件
components: {
son: {
template: `
<div>
<h4>子级组件</h4>
<button @click="answerQ">回答</button>
</div>
`,
// props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参
methods: {
answerQ() {
this.$emit('tellAns', 8);
}
}
}
}
})
三，兄弟级之间传递参数
1，创建事件总线let eventBus = new Vue();
2，在A方法体里调用eventBus.$emit("emitName",'jack');
3，在B方法体里接收，eventBus.$on("emiName",(value)=>{})，此时的value就等于A中传递过来的jack。
此方法通用，适合父级传子级，子级传父级，同级之间传递。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script>
//创建事件总线对象
let eventBus = new Vue();
//创建父级组件
Vue.component('father', {
template: `
<div class="father">
<son1></son1>
<son2></son2>
</div>
`,
//创建子级组件
components: {
son1: {
template: `
<div>
<h2>A</h2>
<div>B,你叫{{bName}}</div>
</div>
`,
data() {
return {
bName: "?"
}
},
mounted() {
eventBus.$on("tellName", (value) => {
this.bName = value;
})
}
},
son2: {
template: `
<div>
<h2>B</h2>
<button @click="tellMyName">告诉你</button>
</div>
`,
methods: {
tellMyName() {
eventBus.$emit("tellName", "jack");
}
}
}
}
})
var vm = new Vue({
el: '#app',
data: { }
})
</script>
</body>
</html>
Vue的自定义组件之间的数据传递的更多相关文章
- Vue 爬坑之路（二）—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- （转）Vue 爬坑之路（二）—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue基础知识之组件及组件之间的数据传递（五）
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...
- 解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...
- 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function
解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
随机推荐
- linux下的缓存机制及清理buffer/cache/swap的方法梳理 （转）
一.缓存机制介绍 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果 ...
- composer学习总结
composer 简介:是php用来管理依赖(dependency)关系的工具,工具包地址:https://packagist.org 下载地址:https://getcomposer.org/ 安 ...
- Android 简单记事本
写在前面 课程作业需要,于是忙活好几天抄了一个简单的记事本,使用已学内容包括Android UI布局,Activity的跳转,SQLite数据库. 开发环境:Android Studio 参考:htt ...
- java @FunctionalInterface
public class Worker { private String doWork(String job) { return "Job " + job + " don ...
- Hadoop InputFormat 输入文件分片
1. Mapper 与 Reducer 数量 对于一个默认的MapReduce Job 来说,map任务的数量等于输入文件被划分成的分块数,这个取决于输入文件的大小以及文件块的大小(如果此文件在 HD ...
- CPU利用率和CPU负荷(CPU usage vs CPU load)
对于CPU的性能监测,通常用top指令能显示出两个指标:cpu 利用率和cpu负荷. 其中%Cpu相关的内容: us表示用户进程cpu利用率,sy表示系统内核进程cpu利用率,ni表示运行正常进程消耗 ...
- SQLServer2008 查询分析器内容未保存，查找分析器内容
位置:C:\Users\Administrator\Documents\SQL Server Management Studio\Backup Files\Solution1
- hdoj4859海岸线
1.地图周围再加一圈海 2.周长最多为sum=n*(m+1)+m*(n+1).如果有邻接相同,要减1.最小割使相同最少.结果为sum-最小割 3.但是有E海滩,两边都能选.让E到S,T都连一个很大的数 ...
- 『计算机视觉』物体检测之RefineDet系列
Two Stage 的精度优势 二阶段的分类:二步法的第一步在分类时,正负样本是极不平衡的,导致分类器训练比较困难,这也是一步法效果不如二步法的原因之一,也是focal loss的motivation ...
- 缓存之Memcache
Memcache Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. ...