vue|vue 学习总结笔记（三） vue|相关知识

一、如何使用组件
1.全局注册一个组件

Vue.component('my-component',{ template:'这是一个组件' }); // 注：全局组件在任何实例中都可以使用。要在实例中使用全局组件，必须在初始化根实例之前注册组件，否则会报错。

2.注册一个局部组件

/**html**/// js var app1 = new Vue({ el: '#app1', data: { msg: 'app1的内容' }, components: { 'my-component': { template: "这是一个局部组件" } } }); //注：局部注册的组件只能在其实例中使用，当全局组件与实例组件重名时，会优先使用局部组件。

3.组件的data选项必须是一个函数
当一个组件被定义，data必须声明为一个初始数据对象的函数，因为组件可能用来创建多个实例。如果data仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象。通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。如：

// 这时点击 button ,每个按钮的 counter 都是一样的，因为三个组件实例共享了同一个 data 对象，因此递增一个 counter 会影响所有组件。修改一下：可以通过为每个组件返回全新的数据对象来修复这个问题，每个counter组件都有自己的状态。

二、组件组合
组件最常见的关系就是父子组件关系：组件A在其模板中使用了组件B，它们之间必然需要相互通信：父组件给子组件下发数据，子组件则将内部的事件告知父组件
Vue中，父子组件的关系总结为：父组件通过prop向子组件传递数据，子组件通过事件向父组件发送消息。
1.使用prop传递数据

//组件的作用域不是孤立的，不能再子组件模块内直接使用父组件的数据，父组件的数据需要通过prop才能下发到子组件中。 // 子组件要显示地使用prop选项声明他预期的数据

2.prop命名
a.camelCase(驼峰式) b. kebab-case(短线分割式)

// html特性是不区分大小写的。所以camelCase(驼峰式命名)的prop需要转换为相对应的kebab-case(短线分割式命名)。// 注:对于字符串模板，没有这个限制

3.动态prop
a.prop静态的传值

b.prop动态传值
与绑定到任何普通的html特性相类似，可以用v-bind来动态的将prop绑定到父组件的数据。每当父组件的数据变化时，该变化也会传递给子组件。

【vue|vue 学习总结笔记（三）】4.字面量语法 vs 动态语法
要传递javascript表达式，而不是字符串时，需要动态语法 v-bind，prop可以接受任何类型的值。
a.传入一个数字

b.传入一个布尔值

c. 传入一个数组

d.传入一个对象

e. 传入一个对象的所有属性

5.单向数据流
prop是单向绑定的：当父组件属性变化时，将传导到子组件，但反过来不会。这是为了防止组件无意间修改了父组件的状态，避免应用的数据难以理解。
每次父组件更新时，子组件的所有prop都会更新为最新值，这意味不应该在子组件内部改变prop，如果做了，vue会在控制台发出警告。
有两种情况很容易去修改prop的数据
(1)prop作为初始值传入后，子组件想把它作为局部数据来用