vue组件之间的传值方式
Posted wanqingcui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue组件之间的传值方式相关的知识，希望对你有一定的参考价值。
一.父组件向子组件传值方式
1.1父组件向子组件传数据方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <com1></com1> 13 </div> 14 <script> 15 16 var vm=new Vue({ 17 el:‘#app‘, 18 data:{ 19 msg:‘123==啊父组件中的数据‘ 20 }, 21 methods: { 22 23 }, 24 // 定义一个私有子的组件 25 components: { 26 // 来看下子组件能拿到vm父组件中的data里面的msg数据吗 27 // 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法 28 // 那么子组件怎么获取到父组件的数据 29 com1:{
//这里会报错：子组件直接引用父组件的msg数据 30 template:‘<h1>这是子组件--{{msg}}</h1>‘ 31 } 32 } 33 }) 34 </script> 35 </body> 36 </html>
// 那么子组件怎么获取到父组件的数据： 父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，子组件通过props定义父组件传过来的数据才能使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!-- 父组件，可以在引用子组件的时候，通过熟悉绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式， --> 13 <!-- 传递到子组件内部，供子组件使用 --> 14 <com1 v-bind:parentmsg="msg"></com1> 15 </div> 16 <script> 17 18 var vm=new Vue({ 19 el:‘#app‘, 20 data:{ 21 msg:‘123==啊父组件中的数据‘ 22 }, 23 methods: { 24 25 }, 26 // 定义一个私有子的组件 27 components: { 28 // 来看下子组件能拿到vm父组件中的data里面的msg数据吗 29 // 结论：经过演示,发现,子组件中，默认无法访问到父组件的data上的数据和methods中的方法 30 // 那么子组件怎么获取到父组件的数据 31 com1:{ 32 data(){ 33 // 注意：子组件中的data数据，并不是父组件传递过来的，而是子组件自身私有的，比如：子组件子组件通过ajax， 34 // 请求回来的数据，都可以放在data身上 35 return{ 36 title:‘123‘, 37 content:‘qqq‘ 38 } 39 }, 40 template:‘<h1>这是子组件--{{parentmsg}}</h1>‘, 41 // 注意：组件中的所有props中的数据,都是通过父组件传递给子组件的 42 // 注意子组件中的data和props数据的区别：props只读，无法重新赋值，data数据都是可读可写 43 // props是一个数组，把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据 44 props: [‘parentmsg‘] 45 46 } 47 } 48 }) 49 </script> 50 </body> 51 </html>
1.2父组件向子组件传递方法，使用的是事件绑定机制，子组件通过$emit（）方法拿到父组件传过来的数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="vue.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <!-- 如果是事件的话就用事件绑定机制 --> 13 <!-- 父组件向子组件传递方法，使用的是事件绑定机制 v-on，当我们自定义一个事件属性之后， --> 14 <!-- 那么子组件就能够，通过某些方式，来调用传递这个方法了 --> 15 <com2 v-on:func="show"></com2> 16 </div> 17 <template id="tmp1"> 18 <div> 19 <h1>这是子组件</h1> 20 <input type="button" value="这是子组件中的按钮，-点击它，触发父组件传递过来的func方法" @click="myclick"> 21 </div> 22 </template> 23 <script> 24 // 定义一个字面量类型的组件模板对象 25 var com2={ 26 // 通过指定一个ID，表示说，要去加载这个指定ID的template元素中的内容，当作组件的HTML结构 27 template:‘#tmp1‘, 28 methods:{ 29 myclick(){ 30 // 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法 31 // emit触发 32 this.$emit(‘funcs‘) 33 } 34 } 35 } 36 var vm=new Vue({ 37 el:‘#app‘, 38 data:{ 39 show(){ 40 console.log(‘调用了父组件上的show方法‘) 41 } 42 }, 43 methods: { 44 45 }, 46 components: { 47 com2 48 // 类似于 com2:com2 49 50 } 51 }) 52 </script> 53 </body> 54 </html>
以上是关于vue组件之间的传值方式的主要内容，如果未能解决你的问题，请参考以下文章