vue组件详解
- 组件用法：
组件注册：
- 全局注册：
任何 Vue 实例都可以使用
my-component 就是注册的组件自定义标签名称
- 局部注册：
在 Vue 实例中,使用 componen饱选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。组件中也可以使用 components 选项来注册组件,使组件可以嵌套。
组件中还可以像 Vue 实例那样使用其他的选项,比如 data 、 computed 、methods 等。但是在使用data 时 , 和实例稍有区别, data 必须是函数,然后将数据 return 出去，
JavaScript 对象是引用关系 , 所以如果 return 出 的对象引用了外部 的一个对象 , 那这个对象就是共享的 , 任何一方修改都会同步。
组件使用了 3 次 , 但是点击任意一个
组件通信：
父子组件通信
2.使用props传递数据：
父组件向子组件传值：
可以使用指令 v-bind来动态绑定 props 的值,当父组件的数据变化时,也会传递给子组件
这里用 v-model 绑定了父级的数据 parentMessage ,当通过输入框任意输入时,子组件接收到
的 props“ message ”也会实时响应,并更新组件模板。
3.单向数据流
组件中声明了数据 count, 它在组件初始化时会获取来自父组件的 initCount , 之后就与之无关了,只用维护 count , 这样就可以避免直接操作 initCount 。另 一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了
注意,在 JavaScript中对象和数组是引用类型,指向同一个内存空间,所以 props 是对象和数组时,在子组件内改变是会影响父组件的。
4.数据的验证
上面所介绍的 props 选项的值都是一个数组,一开始也介绍过,除了数组外,还可以是对象,当 prop 需要验证时,就需要对象写法。
Vue.component('my-component', {
props: {
//必须是数字类型
propsA: Number,
//必须是字符串或数字类型
propsB: [String, Number],
//布尔值，如果没有定义，默认值就是true
propsC: {
type: Number,
default: true
},
//数字，而且是必传
propsD: {
type: Number,
required: true
},
//如果是数组或对象，默认值必须是一个函数来返回
propsE: {
type: Array,
default: function () {
return [];
}
},
//自定义一个函数
propsF: {
vaildator: function (value) {
return value > 10;
}
}
}
})验证的 type 类型可以是:
• String
• Number
• Boolean
• Object
• Array
• Function
props 也可以是一个自定义构造器,使用 instanceof 检测。当 prop 验证失败时,在开发版本下会在控制台抛出 一条警告。
子组件向父组件$emit
总数;{{ total }}
上面示例中,子组件有两个按钮,分别 实现加 1 和减 1 的 效果 , 在改变组件的 data“ counter "后 ,通过$emit()再把它传递给父组件 , 父组件用 v-on:increase 和 v-on:reduce (示例使用的是语法糖)。$emit()方法的第 一个参数是自定义事件的名称 , 例如示例的 increase 和 reduce 后面的参数都是要传递的数据,可以不填或填写多个。
总结：
v-model创建自定义的表单输入组件 , 进行数据双向绑定
总数：{{ total }}