vue父组件给子组件传值

父组件：

<template>
    <div class="app">
        <child :date="msg"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msg: "this is msg"
        }
    },
    components:{
        child,
    }
}
</script>

步骤1：引入子组件

import child form './child.vue'

步骤2：添加到父组件的components中

    components:{
        child,
    }

步骤3：将需要传的数据绑定到子组件中

<child :date="msg"></child>

这里的date是随便取的变量名，后面子组件中需要使用。msg是父组件传递给子组件的数据（data中的数据）

子组件：

<template>
    <div class="app">
        <li >{{date}}</li>
    </div>
</template>
<script>
export default {
    props:['date'],
    data () {
        return {
            
        }
    }
}
</script>

步骤1：使用props获取父组件的数据

props:['date']

这里的date是父组件中绑定的变量名，要跟父组件一样。

引入之后子组件就拥有了date这个变量了，不需要在data中再次声明了，可以直接使用

步骤2：直接就可以使用date

<template>
    <div class="app">
        <li >{{date}}</li>
    </div>
</template>

好了，ok!

总结：父组件通过属性绑定，将需要传递的值通过属性绑定到使用的子组件上。子组件通过props接收父组件绑定的属性。