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
随机推荐
- GitHub Toturial
GitHub Toturial Git Summary 1. 设置姓名和email git config --global user.name "YuboFeng" git con ...
- 提高组noip2015
一道二分答案裸题,一道dp,一道各种裸题的混合(树上差分+二分答案+LCA) stone: 二分查找裸题啊: int check(int x) { ,last=; ;i<=n;i++) if(a ...
- 支持向量机（Support Vector Machine）：超平面
超平面 超平面是 $n$ 维空间的 $n-1$ 维子空间,类似二维空间的直线,三维空间的平面. 分类学习最基本的想法就是基于训练集D在样本空间中找到一个划分超平面,将不同类别的样本分开.以二维空间为例 ...
- vue安装之后的报错处理---chromedriver@2.35.0 install: `node install.js`
报错:chromedriver@2.35.0 install: `node install.js` 这个错误的解决方法就是在你创建的项目目录,比如你创建的项目叫myVue,然后你就要在myVue这个目 ...
- laravel框架——验证码（第二种方法）
开发环境: laravel5.5 php7.1.11 mysql 一.安装扩展包 ,安装前确认当前环境支持composer(出现如下图所示则安装成功) $ composer require " ...
- vue--transition-group
1.为什么要使用<transition-group> <transition></transition>是vue封装的过渡组件 <transition nam ...
- ZJOI-2017 R2 游记
来说说考试(之前的事明天再补): 开始看了一遍所有题目,感觉第二题最可做的样子(ZJOI R1树状数组,HNOI splay 你们西方什么题我还没见过,淦!),大概感觉了一下所有题. T1:k=1直接 ...
- 在Python中使用SMTP发送电子邮件
Python中有内置的smtplib模块,完成一封邮件的发送,需要做很多准备工作.第三方的py_smtp这个包也是基于smtplib的,在Python中使用py_smtp发送电子邮件非常方便,只要填写 ...
- vue父子组件的传值总结
久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...
- 分别用Excel和python进行日期格式转换成时间戳格式
最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...