脚手架中全局引用组件
在main.js中
import children from './components/children.vue'
Vue.component("children",children)
局部引用组件
<children></children>
import children from "@/components/children.vue";
export default {
components: {
children
},
}
组件中data必须是函数
js中对象类型变量保存的实际上是对象的引用，存在多个组件会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。
而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题了。
属性Prop
prop的大小写
html中的attribute对大小写不敏感，所有浏览器会把大写解析成小写，使用时驼峰命名的prop名要使用等价的短横线分割命名
// 使用时短横线分隔符 <children :prop-a=""></children> // 组件中驼峰定义 props: ["propA", "propB"]
静态动态prop
静态传递直接传入静态值，动态传递用v-bind
单向数据流
父子prop之间形成单行下行绑定：父级prop更新会向下流动到子组件中，反过来则不行。这样会防止从子组件意外改变父组件的状态，从而导致你应用数据流难以理解。
每次父组件发生更新，子组件中所有的prop都将会刷新为最新的值。意味这你不应该在一个子组件内部改变prop，否则控制台会警告。
注意：
1.父组件传递的属性是引用类型，在子组件中更改相应的属性会导致父组件相应属性的更改
2.父组件传递的属性是基本类型时，在子组件中更改这个属性会报错。正确的做法是在父组件中绑定属性时时加上.sync修饰符，然后在子组件中改变相应的属性。无论直接改变还是加了修饰符后改变控制台都会报错：
如果希望在子组件对传入的prop进行操作，建议在组件中data或computed创建新属性并以传递进来的值进行初始化，而引用类型避免影响父组件中相应数据最后进行深复制。
prop验证
props: {
typePropA: String, //基础类型检查
typePropB: [String, Number, Boolean, Function, Object, Array, Symbol, Date] // 多个可能的类型
// 必传
requiredProp:{
type:String,
required:true,
},
// 默认值
defaultProp:{
type:String,
default:1
},
// 对象或数组默认值必须从一个工厂函数获取
obj: {
type: Object,
default() {
return { message: "hello" };
}
},
// 自定义验证函数
validatorProp: {
type: Number,
validator: function(value) {
return value > 10;
},
default: 12
}
},
prop的type可以是原生构造函数中的一个：
String, Number, Boolean, Function, Object, Array, Symbol, Date
也可以自己自定义构造函数使用，并且通过instanceof来进行检查确认
非prop类型的属性
也可以像在html标签中添加data-开头的自定义属性一样，给自定义组件添加任意的属性。这样做的话vue会把这个属性放在自定义组建的根元素。自定义组件的模板只能有一个根元素。
父组件向子组件的非prop属性传值则会覆盖，如果是class和style则才用合并。
子向父传递事件
子组件
this.$emit('myclick'，data1，data2)
第一个参数是自定义事件的名字，后面参数是依次要发出的数据
父组件利用v-on为事件绑定处理器
<my-component v-on:myclick="functionName"></my-component>
此时不应该传进任何参数，否则子组件暴露出的数据就无法获取了
父绑定原生事件，用.native修饰v-on
<my-component @click.native="functionName"></my-component>