vue2.0-组件传值
Posted 小飞博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue2.0-组件传值相关的知识，希望对你有一定的参考价值。
父组件给子组件传值，子组件用props接收
例子：两个组件，一个是父组件标签名是parent，一个是子组件标签名是child，并且child组件嵌套在父组件parent里，大概的需求是：我们子组件里需要显示父组件里的数据。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子组件接收父组件的的数据</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 <parent></parent> 11 </div> 12 <script> 13 var vm=new Vue({ 14 el:‘#box‘, 15 //组件 16 components:{ 17 //父组件 parent是标签名 template 是对应的模版 data 里是对应的数据 18 ‘parent‘:{ 19 template:` 20 <div> 21 <h4>父组件</h4> 22 <child :receive-name="msg1"></child> 23 </div>`, 24 data(){ 25 return { 26 msg:‘我是父组件的第一条数据‘, 27 msg1:‘我是父组件的第二条数据‘ 28 } 29 }, 30 //子组件 child是标签名 template 是对应的模版 data 里是对应的数据 31 components:{ 32 ‘child‘:{ 33 template:`<div> 34 <h4>子组件</h4> 35 <p>子组件接收父组件的的数据：{{receiveName}}</p> 36 </div>`, 37 data(){ 38 return { 39 msg1:‘我是子组件的数据‘ 40 } 41 }, 42 props:[‘receiveName‘] 43 } 44 } 45 } 46 } 47 }); 48 </script> 49 </body> 50 </html>
子组件child用props接收父组件parent里的数据，props：[]里的参数是用来接收父组件数据的名字，为了方便用了receiveName，然后我们需要在父组件里的子组件标签child上动态绑定receiveName，由于vue推荐有大小写的英文用-，（receiveName->receive-name）,v-on:属性的简写:属性,:receive-name="父组件的数据",父组件的数据有msg,msg1。子组件需要哪个就用那个,这样看起来是不是很方便。
子组件通过事件向父组件发送自己的数据，监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
1 this.$emit(event,...args); 2 /* 3 * event: 要触发的事件 4 * args: 将要传给父组件的参数 5 */
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>子组件向父组件传值</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 <parent></parent> 11 </div> 12 <script> 13 var vm=new Vue({ 14 el:‘#box‘, 15 //组件 16 components:{ 17 //父组件 parent是标签名 template 是对应的模版 data 里是对应的数据 18 ‘parent‘:{ 19 template:` 20 <div> 21 <h4>父组件</h4> 22 <p>父组件接收到子组件的数据是：{{parentMsg1}}</p> 23 <child v-on:listenChildEvent="showChildMsg"></child> 24 </div>`, 25 data(){ 26 return { 27 parentMsg:‘我是父组件的第一条数据‘, 28 parentMsg1:‘‘ 29 30 } 31 }, 32 methods:{ 33 showChildMsg(data){ 34 // console.log(data); 35 this.parentMsg1=data; 36 } 37 }, 38 //子组件 child是标签名 template 是对应的模版 data 里是对应的数据 39 components:{ 40 ‘child‘:{ 41 template:`<div> 42 <h4>子组件</h4> 43 <button v-on:click="sendMsgToParent">发送子组件数据给父组件</button> 44 </div>`, 45 data(){ 46 return { 47 childMsg:‘我是子组件的数据‘ 48 } 49 }, 50 methods:{ 51 sendMsgToParent(){ 52 let childData=this.childMsg; 53 this.$emit(‘listenChildEvent‘,childData) 54 } 55 } 56 } 57 } 58 } 59 } 60 }); 61 </script> 62 </body> 63 </html>
最后我们来简单总结下本例子：
1.在子组件中创建一个按钮，给按钮绑定一个点击事件
2.在响应该点击事件的函数中使用$emit来触发一个自定义事件（listenToChildEvent），并传递一个参数（childData），childData就是子组件的数据。
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 ：showChildMsg ,该方法带一个参数即是子组件的额外参数,在子组件里数据已经赋值给这个额外参数,所以最后获取到的参数就是子组件的值
4.保存修改的文件，在浏览器中点击按钮，父组件获取到子组件的数据
细结：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
以上就是全部了，如果小伙伴们有任何疑问，欢迎留言！
以上是关于vue2.0-组件传值的主要内容，如果未能解决你的问题，请参考以下文章