一、父组件向子组件传值

父 ————》子

方法一：通过props

• 父组件

1. 步骤
   （1）将子组件导入父组件中；
   （2）使用子组件，并在子组件标签中通过“ : ” + 需要传递的数据

<template>
    <div>
        <child :name="name"></child>
    </div>
</template>

<script>
import child from './child'
export default {
    name:  'parent',
    components: {
        child
    },
    data() {
        return {
            name: "传给子组件的值"
        }
    }
}
</script>

• 子组件：

1. 步骤
   （1）使用props属性来接收父组件传递过来的数据，数据名要和父组件保持一致

<template>
    <div>
        // 使用从父组件接收过来的数据
        <h1>{{ name }}</h1>
    </div>
</template>

<script>
export default {
    name:  'child',
    // 用props接收父组件传递过来的数据 也可以直接写成props: ["name"]
    props: {
        name: {
            type: String,
            required: true
        }
    }
}
</script>

注意
（1）父组件的数据发生了改变，子组件会自动跟着变
（2）子组件不能直接修改父组件传递过来的props，会报错
（3）父组件给子组件传递的是一个对象的话，子组件可以修改这个对象，因为对象是引用类型

方法二：通过$parent

说明：
子组件通过 this.$parent 获取父组件的值或者方法，并可以直接对其值进行修改或直接调用方法。

• 父组件

<template>
    <div>
        <child :name="name"></child>
        <p>{{ name }}</p>
    </div>
</template>

<script>
import child from '@/child'
export default {
    components: {
        child
    },
    data() {
        return {
            name: '父组件中的值'
        }
    }
}
</script>

• 子组件

<template>
    <div>
        // 显示从父组件获取的数据
        <p>{{ name }}</p>
        <button @click="btn">点击修改父组件中的值</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: ""
        }
    },
    methods: {
        btn() {
            // 利用 $parent 获取父组件中的数据或方法
            this.name = this.$parent.name
            // 利用 $parent 修改父组件中的数据
            this.$parent.name = "修改父组件中传递过来的值"
        }
    }
}
</script>

二、子组件向父组件传值

子 ————》父

方法一：通过$emit

说明：
（1）父组件内，给组件@自定义事件="父methods函数"
（2）子组件内，恰当时机 this.$emit("上面自定义事件名,值)

• 父组件

<template>
    <div>
        // 显示子组件传递过来的数据
        <p>{{ name }}</p>
        // @自定义事件="父methods函数"
        <child @checkShow="checkShowFn"></child>
    </div>
</template>

<script>
import child from '@/child'
export default {
    components: {
        child
    },
    data() {
        return {
            name:""
        }
    },
    methods: {
        checkShowFn(value) {
            // 将子组件传递过来的数据赋值给name值
            this.name = value
        }
    }
}
</script>

• 子组件

<template>
    <div>
        <button @click="btn">点击之后将值传递给父组件</button>
    </div>
</template>

<script>
export default {
    methods: {
        btn() {
            // this.$emit("上面自定义事件名,值)
            this.$emit('checkShow',"需要传递给父组件的值")
        }
    }
}
</script>

子传父其他方式链接

三，当父向子传值 子组件又要修改父组件的值时 用到的方法

1.通过v-model （一个组件只能使用一次）

使用技巧：
（1）父组件内 ,在组件上使用 v-model（以下俩句代码是v-model的原理）
传递 :value="Show"
修改 @input="Show= event 就是子组件传递过来的值
（2）子组件内, 在props中默认用value接收传递过来的值；在methods中通过默认的自定义事件名 传递要修改的值

• 父组件

<template>
    <div>
        <child v-model="show"></child>
    </div>
</template>

<script>
import child from '@/child'
export default {
    components: {
        child
    },
    data() {
        return {
            show: true
        }
    }
}
</script>

• 子组件

<template>
    <div>
        <div class="child_type" v-if="value"></div>
        <button @click="btn">点击</button>
    </div>
</template>

<script>
export default {
    // 父组件用 v-model 传值，子组件的props默认只能用 value 命名
    props: {
        value: {
            type: Boolean,
            required: true
        }
    },
    methods: {
        btn() {
            this.$emit("input",!this.value)
        }
    }
}
</script>

<style scope>
.child_type {
    width: 300px;
    height: 300px;
    background-color: red;
}
</style>

注意事项：

1. 一个组件上只能使用一次 v-model
2. 如果需要修改 v-model 的规则名称，可以通过子组件的 model 属性来配置修改
   实例如下：
   在子组件的model中进行修改 父组件不用变

• 修改的子组件

<template>
    <div>
        <div class="child_type" v-if="isShow"></div>
        <button @click="btn">点击</button>
    </div>
</template>

<script>
export default {
    model: {
        prop: "isShow", // 对应上面v-if中的名称，默认是value
        event: "checkShow" // 默认是input
    },
    props: {
        // 默认是value，因为改成了isShow了，所以这里也要变成isShow
        isShow: {
            type: Boolean,
            required: true
        }
    },
    methods: {
        btn() {
            // 对应上面model属性中的event，默认是input，因为改成了checkShow了，所以这里也要变成checkShow
            this.$emit("checkShow",!this.value)
        }
    }
}
</script>

<style scope>
.child_type {
    width: 300px;
    height: 300px;
    background-color: red;
}
</style>

疑问: 如果有多个数据需要实现类似于 v-model 的效果什么实现呐？
答案：.sync修饰符

2.使用属性的 .sync 修饰符

使用技巧：
父组件内 ,在组件使用.sync
子组件内,在适当的时机this.$emit('update:props属性名'，值)

• 父组件

<template>
    <div>
        <child :isShow.sync="show"></child>
    </div>
</template>

<script>
import child from '@/child'
export default {
    components: {
        child
    },
    data() {
        return {
            show: true
        }
    }
}
</script>

• 子组件

<template>
    <div>
        <div class="child_type" v-if="value"></div>
        <button @click="btn">点击</button>
    </div>
</template>

<script>
export default {
    // 父组件用 v-model 传值，子组件的props默认只能用 value 命名
    props: {
        isShow: {
            type: Boolean,
            required: true
        }
    },
    methods: {
        btn() {
            // 语法：$emit("update:props属性名",值)
            this.$emit("update:isShow",!this.value)
        }
    }
}
</script>

<style scope>
.child_type {
    width: 300px;
    height: 300px;
    background-color: red;
}
</style>