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绑定到父组件的数据。每当父组件的数据变化时，该变化也会传递给子组件。

4.字面量语法 vs 动态语法
要传递javascript表达式，而不是字符串时，需要动态语法 v-bind，prop可以接受任何类型的值。
a.传入一个数字

b.传入一个布尔值

c. 传入一个数组

d.传入一个对象

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

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

        



// 正确的应对方法是：定义一个局部变量，并用prop的值初始化它：
// 修改为：

    

(2)prop作为原始数据传入后，由子组件处理成其他数据输出:

// 正确的做法是：定义一个计算属性，处理prop的值并返回

    



// 注：在javascript中对象和数组是通过引用传递的，所以对于一个数组或者对象类型的prop来说，
// 在子组件中改变对象或者数组本身，将会影响到父组件的状态。

6.prop验证
组件的prop可以指定验证规则，如果传入组件的数据不符合要求，vue会抛出警告
要指定验证规则，需要用对象的形式来定义prop，而不能用字符串数组。