组件之间的传值

父子组件传值

解决方案：自定义属性

语法结构：子组件中通过props选项接受自定义属性

① 编辑子组件，添加自定义属性

// 子组件代码

<template>

	<p>
        data中的数据：{
  { msg }}
    </p>
	<p>
        自定义属性数据：{
  { dataFromParent }} // props中的数据
    </p>

</template>

<script>
export default {
    // 声明自定义属性：一个组件可能会存在多个属性，第一种格式通过数组接受数据
    // 定义的属性名称，用于存储接受的数据，可以和data选项中的变量一样使用；不能和data选项变量重名
    props: ['dataFromParent'],

    data() {
        return {
            msg: "xxxx"
        }
    }
    ....
}
</script>

② 编辑父组件，通过属性传递数据

//父组件代码

<template>

	<!-- 父组件给子组件传递数据 -->
	<My-child :dataFromParent="info"></My-child> // dataFromParent 来自子组件
	<My-child :data-from-parent="info"></My-child>

</template>

<script>

impo