vue中父组件向子组件传递数据

vue中父组件向子组件传递数据

一、总结

一句话总结：

a、组件使用时【绑定数据】：通过data和data2两个名字绑定了数据：<login :data="parent_msg" :data2="parent_arr"></login>

b、子组件中通过【props属性】接收数据：props:['data','data2']

c、子组件使用数据：在子组件中使用数据的时候，也是【用data和data2这两个名字】：<h3>@{{data}}</h3><h3>@{{data2[0].name}}</h3>

二、vue中父组件向子组件传递数据

1、效果图

2、代码

这是在php的laravel框架中使用，所以使用vue数据的时候前面加了@符号，比如@{{msg}}

<div id="app">
    <p>@{{msg}}</p>
    <login :data="parent_msg" :data2="parent_arr"></login>
</div>


<template id="login">
    <div>
        <h2>这是login组件</h2>
        {{--这里要用data这个名字--}}
        <h3>@{{data}}</h3>
        <h3>@{{data2[0].name}}</h3>
    </div>
</template>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '我有一只小毛驴，我永远也不骑',
            parent_msg:'这是父标签的msg',
            parent_arr:[{'name':'parent_arr_name'}]
        },
        components:{
            //组件名称，组件对应的模板对象
            login:{ // 定义实例内部私有组件的
                template: '#login',
                props:['data','data2']
            }
        }
    });
</script>