子组件通过$emit派发事件和值给父组件（值可以有多个）
this.$emit('fnX', value)
父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值
<ComponentName @fnX="fnY"></ComponentName> methods: { fnY(value) { console.log(value) } }
父子组件间传递数据 demo
See the Pen mdJVqgg by xugaoyi (@xugaoyi) on CodePen.
Prop 验证 与 非 Prop 的 Attribute
Prop 验证
子组件对父组件传递来的参数进行校验
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) 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 } } } })
非 Prop 的 Attribute
当子组件没有定义对应的Prop来接收父组件传来的值时，这个值将会出现在组件根元素的Attribute上面。
用处
例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件，这个插件需要在其 <input> 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上：
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
然后这个 data-date-picker="activated" attribute 就会自动添加到 <bootstrap-date-input>组件的根元素上。
