一.父组件向子组件传值方式
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>
二.子组件向父组件传值
子组件向父组件传值成功
总结一下：
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$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 // 从第二个参数开始进行传参数 32 this.$emit('func',123) 33 } 34 } 35 } 36 var vm=new Vue({ 37 el:'#app', 38 data:{ 39 show(data){ 40 console.log('调用了父组件上的show方法------'+data) 41 } 42 }, 43 methods: { 44 45 }, 46 components: { 47 com2 48 // 类似于 com2:com2 49 50 } 51 }) 52 </script> 53 </body> 54 </html>
子组件向父组件传值的方式
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 data(){ 29 return{ 30 sonmsg:{ 31 name:'小头儿子', 32 age:6 33 } 34 } 35 }, 36 methods:{ 37 myclick(){ 38 // 当点击子组件按钮的时候，如何拿到父组件传递过来的func方法，并调用这个方法 39 // 从第二个参数开始进行传参数 40 // this.$emit('func',123) 41 this.$emit('func',this.sonmsg) 42 } 43 } 44 } 45 var vm=new Vue({ 46 el:'#app', 47 data:{ 48 // 定义一个从儿子那里拿过来的数据 49 datamsgFromSon:null 50 }, 51 methods: { 52 show(data){ 53 // console.log('调用了父组件上的show方法------'+data) 54 console.log(data) 55 this.datamsgFromSon=data; 56 console.log(this.datamsgFromSon) 57 } 58 }, 59 components: { 60 com2 61 // 类似于 com2:com2 62 63 } 64 }) 65 </script> 66 </body> 67 </html>
发现一个可以查看的文章
https://www.cnblogs.com/daiwenru/p/6694530.html