码迷,mamicode.com
首页 > 其他好文 > 详细

vue组件之间的传值方式

时间:2019-04-23 17:09:40      阅读:166      评论:0      收藏:0      [点我收藏+]

标签: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>

 

 

 

 

 

 

vue组件之间的传值方式

标签:charset   默认   rip   har   tmp   console   component   机制   ons   

原文地址:https://www.cnblogs.com/wanqingcui/p/10757344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!