Vue -- 组件

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。

1. Vue.extend()构造器的template属性用于定义组件要渲染的HTML。
2. 使用Vue.component()注册组件时，第1个参数时组件的标签，第2个参数是组件构造器。

1. 组件的使用

最基础的方式全局注册组件：

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
            <my-component></my-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
    
        // 1.创建一个组件构造器
        var myComponent = Vue.extend({
            template: '<div>This is my first component!</div>'
        })
        
        // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
        Vue.component('my-component', myComponent)
        
        new Vue({
            el: '#app'
        });
        
    </script>
</html>

组件注册语法糖：

// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
    template: '<div>This is the first component!</div>'
})

var vm1 = new Vue({
    el: '#app1'
})

解耦一点：组件构造器可以直接写<template>定义

        <template id="myComponent">
            <div>This is a component!</div>
        </template>

2. 组件的传参

组件实例的作用域是孤立的。可以使用 props 把数据传给子组件.

子组件：

var vm = new Vue({
    el: '#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})

由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为 kebab-case（短横线隔开）。父组件利用v-bind绑定 myName数据，父组件中要改为连字符my-name

父组件：

<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>

1. 组件的使用

2. 组件的传参

猜你喜欢