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

’’Sun

时间:2019-10-11 23:53:24      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:title   head   com   传递   highlight   vue   pre   regexp   body   

父传子

  1. 组件中的所有pzops中的数据,都是通过父组件传递给子组件的
  2. props中的数据,都是只读的,无法重新赋值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
<div id="app">
<son :parentdata='message'></son>
<!-- parentdata作为子组件的接收值,
message为父组件数组作为传给子组件的值
简单来讲 把父组件message的值传给子组件son,son通过 props['parentdata']接收
-->
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
message: 'hahah ',
},
components:{
son:{
props:['parentdata'],
template:`<div>{{parentdata}}</div>`,
}
}
})
</script>

父组件传递方法给子组件

  • 父组件可以取到子组件的值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <body>
    <div id="app">
    <temp1 @func='console'></temp1>
    </div>
    <template id="temp1">
    <div>
    这是子组件
    <button @click="dd(data)">点击打印</button>
    </div>
    </template>
    </body>
    <script>
    let temp1={
    template:'#temp1',
    data() {
    return {
    data:{
    age:188888,
    name:'zz'
    }
    }
    },
    methods: {
    dd(e){
    this.$emit('func',this.data)
    }
    },
    }

    let vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {
    console(data){
    console.log("打印了父组件的方法"+data.age);
    this.obj=data;
    console.log(this.obj);
    console.log(vm);
    }
    },
    components:{
    temp1,
    }
    })
    </script>

原文:大专栏  ’’Sun


’’Sun

标签:title   head   com   传递   highlight   vue   pre   regexp   body   

原文地址:https://www.cnblogs.com/wangziqiang123/p/11657509.html

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