Vue.js-组件详解

常见的限制元素还有

、
、。

除了template选项外，组件中还可以像Vue实例那样使用其他的选项，比如data、computed、methods等。

但是在使用data时，data必须是函数，然后将数据return出去。

JavaScript对象是引用关系，如果return的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步。

使用props传递数据

组件不仅要把模板的内容进行复用，更重要的是组件间进行通信。

通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收后根据参数的不同渲染不同的内容或者执行操作。这个正向传递数据的过程通过props来实现。

在组件中，使用选项props声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。

props: ["message"],
template: `
{{message}}
`,

props中声明的数据与组件data函数中return的数据主要区别就是props的数据来自父级，而data中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template及计算属性computed和方法methods中使用。

由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名的props名称要转为短横线分割命名。

有时候，传递的数据并不是直接写死，而是来自父级的动态数据，这时可以使用指令v-bind动态绑定props的值，当父组件的数据变化时，也会传递子组件。

props: ["message"], template: `
{{message}}
`, data: { parentMessage: "" }

这里用v-model绑定了父级的数据parentMessage，当通过输入框任意输入时，子组件接收到的props["message"]也会实时响应，并更新组件模板。

单向数据流

业务中会经常遇到两种需要改变prop的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据，引用父组件的prop。

    


Vue.component("my-component", {
    props: ["initCount"],
    template: `
{{count}}
`,
    data() {
        return {
            count:this.initCount
        }
    }
});

组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount。

另一种情况就是prop作为需要被转变的原始值传入，这种情况用计算属性就可以。

    


Vue.component("my-component", {
    props: ["width"],
    template: `
组件内容
`,
    computed: {
        style: function () {
            return {
                width: this.width + "px"
            }
        }
    }
});

因为用CSS传递宽度要带单位（px），数值计算一般不带单位，所以统一在组件内使用计算属性。

在JavaScript中对象和数组时引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件。

数组验证

当prop需要验证时，需要对象写法。

一般当组件需要提供给别人使用时，推荐都进行数据验证。比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。

See the Pen prop by whjin (@whjin) on CodePen.




在改变组件的data "counter"后，通过$emit()再把它传递给父组件，父组件用@increase和@reduce。$emit()方法的第一个参数是自定义事件的名称。

除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听时一个原生事件，监听的是该组件的根元素。

使用v-model

Vue可以在自定义组件上使用v-model指令。

组件$emit()的事件名时特殊的input，在使用组件的父级，并没有在上使用@input="handler"，而是直接用了v-model绑定的一个数据total。

v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定。

See the Pen v-model双向绑定 by whjin (@whjin) on CodePen.




$broadcast()是由上级向下级广播事件，用法完全一致，方向相反。

这两种方法一旦发出事件后，任何组件都可以接收到，就近原则，而且会在第一次接收到后停止冒泡，除非返回true。

这些方法在Vue 2.x版本中已废弃。

在Vue 2.x中，推荐任何一个空的Vue实例作为中央事件总线（bus），也就是一个中介。

See the Pen Vue-bus事件总线 by whjin (@whjin) on CodePen.




在父组件模板中，子组件标签上使用ref指定一个名称，并在父组件内通过this.$refs来访问指定名称的子组件。

$refs只在组件渲染完成后才填充，并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs。

Vue 2.x将v-el和v-ref合并成ref，Vue会自动去判断是普通标签还是组件。

使用slot分发内容

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫做内容分发。

组件不知道它的挂载点会有什么内容。挂载点的内容是由的父组件决定的。

组件很可能有它自己的模板。

props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组件也是由这3部分构成。

作用域

父组件中的模板：

    {{message}}

这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件的数据。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。

    


Vue.component("child-component", {
    template: `
子组件1
`,
});
var app = new Vue({
    el: "#app",
    data: {
        showChild: true
    }
});

这里的状态showChild绑定的是父组件的数据。

在子组件上绑定数据：

    


Vue.component("child-component", {
    template: `
子组件
`,
    data() {
        return {
            showChild: true
        }
    }
});
var app = new Vue({
    el: "#app",
});

因此，slot分发的内容，作用域是在父组件上。

单个slot

在子组件内使用特殊的元素就可以为这个组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容。

    
        
分发的内容
        
更多分发的内容
    


Vue.component("child-component", {
    template: `
    

        
           
如果没有父组件插入内容，我将作为默认出现。
        
    
            `,
});
var app = new Vue({
    el: "#app",
});

子组件child-component的模板内定义了一个元素，并且用一个

作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，就会替换整个。

子组件内的备用内容，它的作用域是子组件本身。

具名Slot

给元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

See the Pen Vue-slot by whjin (@whjin) on CodePen.




通过$slots可以访问某个具名slot,this.$slots.default包括了所有没有被包含在具名slot中的节点。

组件高级用法 递归组件

给组件设置name选项，组件在它的模板内可以递归地调用自己。

    


Vue.component("child-component", {
    name: "child-component",
    props: {
        count: {
            type: Number,
            default: 1
        }
    },
    template: `

    

    `,
});

组件递归使用可以用来开发一些具有未知层级关机的独立组件，比如级联选择器和树形控件等。

内联模板

组件的模板一般都是在template选项内定义的，Vue提供了一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是把它当内容分发，这让模板更灵活。

See the Pen Vue-inline-template by whjin (@whjin) on CodePen.




可以直接绑定在组件对象上：

    


var Home = {
    template: `
Welcome home!
`
};

var app = new Vue({
    el: "#app",
    data: {
        currentView: Home
    }
});

异步组件

Vue.js允许将组件定义为一个工厂函数，动态地解析组件。

Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。

    


Vue.component("child-component", function (resolve, reject) {
    window.setTimeout(function () {
        resolve({
            template: `
我是异步渲染的！
`
        })
    }, 1000)
});

var app = new Vue({
    el: "#app",
});

工厂函数接收一个resolve回调，在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。

其他 $nextTick

异步更新队列

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所有数据变化。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在一下个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。

$nextTick就是用来确定什么时候DOM更新已经完成。

See the Pen Vue-$nextTick by whjin (@whjin) on CodePen.


Vue.component("my-component", { template: `#my-component`, }); var app = new Vue({ el: "#app", }); 手动挂载实例

在一些非常特殊的情况下，需要动态地创建Vue实例，Vue提供了Vue.extend和$mount两个方法来手动挂载一个实例。

Vue.extend是基础Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象。

如果Vue实例在实例化时没有收到el选项，它就处于“未挂载”状态，没有关联的DOM元素。可以使用$mount手动地挂载一个未挂载的实例。这个方法返回实例自身，因而可以链式调用其他实例方法。

See the Pen Vue-$mount by whjin (@whjin) on CodePen.



阅读需要支付1元查看
支付并查看
<