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
随机推荐
- log4J日志框架
log4j的配置:log4j是一个日志输出框架,就是用于输出日志的,主流框架大部分都是Log4j输出.Spring框架也可以通过Log4j输出日志 Log4j提供了强大的日志输出的自定义功能(1)通过 ...
- 复旦大学2017--2018学年第二学期（17级）高等代数II期末考试第六大题解答
六.(本题10分) 设 $A$ 为 $n$ 阶幂零阵 (即存在正整数 $k$, 使得 $A^k=0$), 证明: $e^A$ 与 $I_n+A$ 相似. 证明 由 $A$ 是幂零阵可知, $A$ ...
- springBoot整合jpa
https://blog.csdn.net/qq_35180973/article/details/82316438 总体来讲只是在service调用dao的时候用接口代替dao继承CrudRepos ...
- blogger添加代码高亮
blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的 ...
- MyBatis-plus使用
https://blog.csdn.net/qq_32867467/article/details/82944674 官网: https://mp.baomidou.com/guide/optimis ...
- 实验9-1 编写一个存储过程proc_test_func
在TestDB数据库中,编写一个存储过程proc_test_func,要求如下: 1)输入参数 一个整型的输入参数 @value 2)要求在一个select语句返回: @value的绝对值, 此绝对值 ...
- 安装linux14.04
一.制作Ubuntu启动盘 1.将空的优盘格式化当做启动盘,下载UltralSO并安装,安装成功后打开,点击工具栏中的第二个打开镜像文件工具(或通过文件-打开的方式打开),选择下载好的Ubuntu镜像 ...
- 支持向量机（Support Vector Machine）：超平面
超平面 超平面是 $n$ 维空间的 $n-1$ 维子空间,类似二维空间的直线,三维空间的平面. 分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面,将不同类别的样本分开.以二维空间为例 ...
- sourcetree，创建工作流报错：Fatal: Not a gitflow-enabled repo yet. Please run 'git flow init' first.-》解决办法
1.打开项目下.git/config文件,或者如下图操作: 2.打开config文件以后,删除所有 [gitflow *条目并保存文件 3.关闭并重新打开sourcetree 4.仓库->Git ...
- 关于python中loc和iloc方法
pandas以类似字典的方式来获取某一列的值 import pandas as pd import numpy as np table = pd.DataFrame(np.zeros((4,2)), ...