标签:charset 默认 rip har tmp console component 机制 ons
一.父组件向子组件传值方式
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>
标签:charset 默认 rip har tmp console component 机制 ons
原文地址:https://www.cnblogs.com/wanqingcui/p/10757344.html