[TOC] >[success] # 父传子 ~~~ 1.组件实例的作用域是孤立的，不能在子组件直接用父组件的数据，下面图做了详 细解释 2.想将父作用域的值传入，子组件需要在子组件定义'props',用来接受父组件传来的 值。 ~~~ * 父作用域说明  * 父子作用域说明  >[info] ## 父传子详解 ~~~ 1.子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法 2.组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 3.props 中的数据，都是只读的，无法重新赋值 4.props 中的变量名不应该和子组件中data名相同 ~~~ >[danger] ##### props -- 属性校验 ~~~ 1.props不仅可以向下面案例中用数组的形式，也可以用对象来做校验类型 2.官网的案例: Vue.component('my-component', { props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) ~~~ >[danger] ##### 案例 ~~~ 1.下面案例就可以分析一下首先原本父组件作用域的内容是无法传递给子组件的， 但是在子组件定义了一个'props' 用来当做传递的桥梁 2.我们可以吧 parent-title="title"当做赋值运算，其中parent-title相当于子组件的定 义变量，title相当于接受父组件数据，给子组件的parent-title赋值 3.但是注意props 中的数据，都是只读的，无法重新赋值 4.在组件接受时候使用v-bind，在使用的时候可以用大胡子语法，或者v-bind绑定 ~~~ ~~~ ~~~ >[info] ## 抛弃思维定式组件也可以循环 ~~~ ~~~ >[danger] ##### $emit -- 也能父传子 ~~~ 1.'$emit' 的返回值是当前 'this' 2.可以在不使用'prop' 父传子，仅通过在'$emit' 增加一个回调函数，也可以实现 从父组件传值给子组件 3.下面案例如果你是一个已经使用vue 一段时间的人可以直接看，如果不是请先看完子传父，再来 看这个父传子的内容 ~~~ * 子组件的写法 ~~~ ~~~ * 父组件写法 ~~~ ~~~ * 直接复制粘贴运行版本 ~~~html ~~~ >[danger] ##### 有时候只想改变父组件传入的值，但不影响父组件 ~~~ 1.在子组件的 data 中拷贝一份 prop，data 是可以修改的，但 prop 不能 ~~~ ~~~ export default { props: { value: String }, data () { return { currentValue: this.value } } } ~~~ >[info] ## 结论 ~~~ 1.父传子 有两种一种是同props 直接传递，一种是通过事件 利用this.$emit 间接触发 ~~~ >[info] ## 一定要读的官方Prop系列帮助很大 [https://cn.vuejs.org/v2/guide/components-props.html](https://cn.vuejs.org/v2/guide/components-props.html)