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 的开 ...
随机推荐
- Modern Data Lake with Minio : Part 1
转自:https://blog.minio.io/modern-data-lake-with-minio-part-1-716a49499533 Modern data lakes are now b ...
- oracle-sql系统学习-ddl-dml
e41084-04 oracle database sql language reference 11g release 2 sql语句类型 ddl alter ...除了alter session和 ...
- redis quick start
软件: redis server https://github.com/MicrosoftArchive/redis/releases redis python client, install usi ...
- laravel 事务处理
//開啟事務 DB::beginTransaction(); try { //賬號密碼同步到後台登錄表 $user = new \App\Models\User; $user->name = $ ...
- 【转】类似py2exe软件真的能保护python源码吗
类似py2exe软件真的能保护python源码吗 背景 最近写了个工具用于对项目中C/C++文件的字符串常量进行自动化加密处理,用python写的,工具效果不错,所以打算在公司内部推广.为了防止代码泄 ...
- Hadoop "Cannot create directory .Name node is in safe mode."解决方案
转载自:http://www.waitig.com/hadoop-name-node-is-in-safe-mode.html 在使用Hadoop建立文件的时候,出现“Cannot create di ...
- sort a given string
my solution: function order(words){ var splitToArr = words.split(' '), len = splitToArr.length, newA ...
- jquery.nicescroll.min.js滚动条使用方法
jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...
- windows server core 设置shell 及切换
hkey_local_machine/software/Microsoft/windows nt/currentversion/winlogon/shell 1)windows server 2012 ...
- elixir环境配置
mac下 brew install elixir debian下版本可能太低,需要kiex 安装 curl -sSL https://raw.githubusercontent.com/taylor/ ...