vueJS组件笔记（针对.vue组件）

data必须是函数

详见尤大大：

https://cn.vuejs.org/v2/guide/components.html#DOM-%E6%A8%A1%E6%9D%BF%E8%A7%A3%E6%9E%90%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

在data函数中，我们可以通过为每个组件返回全新的数据对象，这样不会污染其他组件。

data (){
var data = {
flag:true
}
return data;
}

组件组合

父子组件之间通信就要解耦。父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

单向数据流

每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。但是如果想改变父组件传来的值怎么办呢？

1.定义一个局部变量，并用 prop 的值初始化它：

props: ['data'],
data: function () {
return { data: this.data }
}

注意：

return { data: this.data }

里面的data是.vue组件使用的绑定值，而

this.data

是来自于父组件传递的值 。

2.定义一个计算属性，处理 prop 的值并返回：

props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}

绑定自定义属性写法 在

在子组件中通过this.xxx使用

props里面有 type（值的类型String，Number，Boolean，Function，Object，Array，Symbol）,default（值的默认值）， required（ 必传值Boolean类型），validator（自定义函数）属性