vue2.0-组件传值
父组件给子组件传值，子组件用props接收
例子：两个组件，一个是父组件标签名是parent，一个是子组件标签名是child，并且child组件嵌套在父组件parent里，大概的需求是：我们子组件里需要显示父组件里的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件接收父组件的的数据</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<child :receive-name="msg1"></child>
</div>`,
data(){
return {
msg:'我是父组件的第一条数据',
msg1:'我是父组件的第二条数据'
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<p>子组件接收父组件的的数据：{{receiveName}}</p>
</div>`,
data(){
return {
msg1:'我是子组件的数据'
}
},
props:['receiveName']
}
}
}
}
});
</script>
</body>
</html>
子组件child用props接收父组件parent里的数据，props：[]里的参数是用来接收父组件数据的名字，为了方便用了receiveName，然后我们需要在父组件里的子组件标签child上动态绑定receiveName，由于vue推荐有大小写的英文用-，（receiveName->receive-name）,v-bind：属性名可以成简写：属性名,:receive-name="父组件的数据",父组件的数据有msg,msg1。子组件需要哪个就用那个,这样看起来是不是很方便。
子组件通过事件向父组件发送自己的数据，监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
this.$emit(event,...args);
/*
* event: 要触发的事件
* args: 将要传给父组件的参数
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件向父组件传值</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
</head>
<body>
<div id="box">
<parent></parent>
</div>
<script>
var vm=new Vue({
el:'#box',
//组件
components:{
//父组件 parent是标签名 template 是对应的模版 data 里是对应的数据
'parent':{
template:`
<div>
<h4>父组件</h4>
<p>父组件接收到子组件的数据是：{{parentMsg1}}</p>
<child v-on:listenChildEvent="showChildMsg"></child>
</div>`,
data(){
return {
parentMsg:'我是父组件的第一条数据',
parentMsg1:'' }
},
methods:{
showChildMsg(data){
// console.log(data);
this.parentMsg1=data;
}
},
//子组件 child是标签名 template 是对应的模版 data 里是对应的数据
components:{
'child':{
template:`<div>
<h4>子组件</h4>
<button v-on:click="sendMsgToParent">发送子组件数据给父组件</button>
</div>`,
data(){
return {
childMsg:'我是子组件的数据'
}
},
methods:{
sendMsgToParent(){
let childData=this.childMsg;
this.$emit('listenChildEvent',childData)
}
}
}
}
}
}
});
</script>
</body>
</html>
最后我们来简单总结下本例子：
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件（listenToChildEvent），并传递一个参数（childData），childData就是子组件的数据。
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 ：showChildMsg ,该方法带一个参数即是子组件的额外参数,在子组件里数据已经赋值给这个额外参数,所以最后获取到的参数就是子组件的值
4.保存修改的文件，在浏览器中点击按钮，父组件获取到子组件的数据
细结：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
非父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>非父子组件通信</title>
<script src="https://cdn.bootcss.com/vue/2.5.5/vue.js"></script>
</head>
<body>
<div id="example">
<counter></counter>
<counte></counte>
</div>
</body>
<script>
var vm=new Vue();
//创建兄弟组件A
var A={
template:`
<div>
<span>{{a}}</span>
<button @click="send">点击发送数据给B组件</button>
</div>
`,
data(){
return {
a:'我是A组件的数据'
}
},
methods:{
send(){
vm.$emit('msga',this.a)
}
}
};
//创建兄弟组件B
var B={
template:`
<div>
<span>我是B组件->{{a}}</span>
</div>
`,
data(){
return {
a:''
}
},
mounted(){
vm.$on('msga',function(a){
this.a=a;
}.bind(this));
}
}; //注册A B组件
new Vue({
el:'#example',
components:{
'counter':A,
'counte':B
}
});
</script>
</html>
以上就是组件之间的传值了，如果小伙伴们有任何疑问，欢迎留言！小编会及时回复。谢谢对博客园的支持！
vue官网链接：https://cn.vuejs.org/
vuex官网链接：https://vuex.vuejs.org/zh-cn/
axios网站链接：https://www.npmjs.com/package/axios
vue2.0-组件传值的更多相关文章
- vue2.0组件传值
props down emit up 嘿嘿 如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0组件库
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue2.0 组件化及组件传值
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
- vue2.0组件之间的传值
1.父子组件--props props:需要注意的是,虽然的是单向的数据流,但是如果传递的是数组或是对象这样的引用类型,子组件数据变化,父组件的数据通也会变化 子组件代码 <template&g ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- Vue2.0组件之间通信（转载）
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0组件之间通信
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...
- Vue2.0+组件库总结
转自:https://blog.csdn.net/lishanleilixin/article/details/84025459 UI组件 element - 饿了么出品的Vue2的web UI工具套 ...
- 转：Vue2.0+组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
随机推荐
- 使用distillery&&docker 部署phoenix 应用
distillery 发布了2.0 了,有好多的新的功能 config prodiver 进行环境变量的配置 appup tansforms 插件系统,方便在release 构建的时候进行修改 m ...
- 论 微服务 和 Entity Framework 对 数据 的 割裂
微服务 的 本质 是 面向对象, 微服务 是 面向对象 对 数据中心 发起的挑战, 在 微服务 架构下, “数据为中心” 的 传统架构 被 严重 割裂, 微服务 的 先天矛盾, 是 对象 和 数据 的 ...
- MySQL 建表语句 create table 中的列定义
MySQL 建表语句 create table 中的列定义: column_definition: data_type [NOT NULL | NULL] [DEFAULT default_value ...
- c#：$用法
为什么会出现$符号,c#6.0才出现的新特性 var s = string.Fromat("{0}+{1}={2}",12,23,12+23) 用起来必须输入string.From ...
- NDK学习笔记（二）
花了点时间把pixeliop的部分看完了,拿到开发文档提供的案例稍事修改,把画面左半边压暗. 这个案例重点在于理清pixel_engine()函数中的坐标与scanline的关系. y代表当前正在调用 ...
- centos绑定多个域名
正在使用aliyun主机,运行centos6.4 64位系统,安装lamp环境后进行域名绑定.配置文件如下: <VirtualHost *:80> DocumentRoot /var/ww ...
- Word中选择中内容后变成C，VMware 虚拟中Ctrl键一直被按住了
Word中选择中内容后变成C: 解决办法:关闭金山词霸的[划词翻译]功能即可. VMware 虚拟中Ctrl键一直被按住了: 解决办法:关闭金山词霸的[取词翻译]功能即可.
- R语言学习路线图-转帖
本文分为6个部分,分别介绍初级入门,高级入门,绘图与可视化,计量经济学,时间序列分析,金融等. 1.初级入门 <An Introduction to R>,这是官方的入门小册子.其有中文版 ...
- STL基础--算法（已排序数据的算法，数值算法）
已排序数据的算法 Binary search, merge, set operations 每个已排序数据算法都有一个同名的更一般的形式 vector vec = {8,9,9,9,45,87,90} ...
- TweenMax 参考
http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的"怪事&qu ...