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
随机推荐
- FIT2096 Assignment 2 2019
FIT2096 Assignment 2 2019_v1.2.docx 9/04/2019 11:34 AMPage 1 | 4FIT2096 Assignment 2 2019Transformat ...
- [Python]数据挖掘（1）、梯度下降求解逻辑回归——考核成绩分类
ps:本博客内容根据唐宇迪的的机器学习经典算法 学习视频复制总结而来 http://www.abcplus.com.cn/course/83/tasks 逻辑回归 问题描述:我们将建立一个逻辑回归模 ...
- Linux vsftpd 安装配置使用
1.安装 yum install vsftpd 2.配置 允许root登陆: /etc/vsftpd/user_list文件中把root那一行删除或者注释掉 /etc/vsftpd/ftpusers文 ...
- Iview的小经验
1.动态控制form验证的小红星 HTML部分: <FormItem :class="{requireStar:bankFlag1}"> CSS部分: /*动态必填项c ...
- 工作中常用的 Shell 命令及技巧
调试 bash 脚本的技巧 加 -x 参数运行 bash 脚本时,会显示执行的语句 # 也可以在 demo.sh 中加上 set -x bash -x demo.sh 设置环境变量,然后通过如上方式运 ...
- CF666E Forensic Examination
思路 线段树合并+广义SAM 先把所有串都插入SAM中,然后用线段树合并维护right集合,对S匹配的同时离线询问,然后就好啦 代码 #include <cstdio> #include ...
- Python汉诺塔
import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): return len(self.it ...
- DAY 17常用模块
一.时间模块:time 1.时间戳:time.time() # 可以作为数据的唯一标识 print(time.time) # 1554878849.8452318 2.延迟线程的运行:time.sle ...
- shell脚本中gsub的应用
(1)文件filename的内容 cat awk_file 1 2 3 $1,200.00 1 2 3 $2,300.00 1 2 3 $4,000.00 (2)去掉第四列的$和,并汇总第四列的和 a ...
- extract method
函数 简短,命名良好 函数名描述的是做什么 而不是怎么做 行数过高的代码中 将一大段做一个事的代码提取到独立的method 中 高层函数直接引用. 创建新函数 将提炼的代码平移到目标函数中 检查是否引 ...