您的位置：首页 > 产品设计 > UI/UE

vue组件的创建和注册

2018-01-22 16:11 746 查看

基本步骤

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

Vue.component()方法注册组件

在Vue实例的作用范围内使用组件

<!DOCTYPE html><html>
    <body>
        <div id="app">
            
            <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>

上面的示例可以改为局部注册的方式：
<!DOCTYPE html><html>
    <body>
        <div id="app">
            
            <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>'
        })

        new Vue({
            el:
'#app',
            components: {
                // 2. 将myComponent组件注册到Vue实例下
                'my-component' : myComponent
            }
        });
    </script></html>

父组件和子组件

我们可以在组件中定义并使用其他组件，这就构成了父子组件的关系。
<!DOCTYPE html><html>
    <body>
        <div id="app">
            <parent-component>
            </parent-component>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        var Child = Vue.extend({
            template:
'<p>This is a child component!</p>'
        })

        var Parent = Vue.extend({
            // 在Parent组件内使用<child-component>标签
            template :'<p>This is a Parent component</p><child-component></child-component>',
            components: {
                // 局部注册Child组件，该组件只能在Parent组件内使用
                'child-component': Child
            }
        })

        // 全局注册Parent组件
        Vue.component('parent-component', Parent)

        new Vue({
            el:
'#app'
        })

    </script></html>

组件注册语法糖

以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖。
使用Vue.component()直接创建和注册组件：
// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
    template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
    el:
'#app1'
})
Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。
使用这种方式，Vue在背后会自动地调用Vue.extend()。
在选项对象的components属性中实现局部注册：
var vm2 = new Vue({
    el:
'#app2',
    components: {
        // 局部注册，my-component2是标签名称
        'my-component2': {
            template: '<div>This is the second component!</div>'
        },
        // 局部注册，my-component3是标签名称
        'my-component3': {
            template: '<div>This is the third component!</div>'
        }
    }
})

使用script或template标签

尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。
庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。
使用<script>标签
<!DOCTYPE html><html>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>

        <script type="text/x-template" id="myComponent">
            <div>This is a component!</div>
        </script>
    </body>
    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-component',{
            template: '#myComponent'
        })

        new Vue({
            el:
'#app'
        })

    </script></html>

使用<template>标签
如果
d6df
使用<template>标签，则不需要指定type属性。
<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
        </div>

        <template id="myComponent">
            <div>This is a component!</div>
        </template>
    </body>
    <script src="js/vue.js"></script>
    <script>

        Vue.component('my-component',{
            template: '#myComponent'
        })

        new Vue({
            el:
'#app'
        })

    </script></html>

组件的el和data选项

传入Vue构造器的多数选项也可以用在 Vue.extend() 或Vue.component()中，不过有两个特例： data 和el。
Vue.js规定：在定义组件的选项时，data和el选项必须使用函数。

使用props

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

props基础示例

下面的代码定义了一个子组件my-component，在Vue实例中定义了data选项。
var vm = new Vue({
    el:
'#app',
    data: {
        name: 'keepfool',
        age: 28
    },
    components: {
        'my-component': {
            template: '#myComponent',
            props: ['myName', 'myAge']
        }
    }
})
为了便于理解，你可以将这个Vue实例看作my-component的父组件。
如果我们想使父组件的数据，则必须先在子组件中定义props属性，也就是props: ['myName', 'myAge']这行代码。
定义子组件的HTML模板：
<template id="myComponent">
    <table>
        <tr>
            <th colspan="2">
                子组件数据
            </th>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myName }}</td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>
        </tr>
    </table></template>
将父组件数据通过已定义好的props属性传递给子组件：
<div id="app">
    <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component></div>
注意：在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为
kebab-case（短横线隔开）。例如，在prop中定义的myName，在用作特性时需要转换为my-name。
在父组件中使用子组件时，通过以下语法将数据传递给子组件：
<child-component v-bind:子组件prop="父组件数据属性"></child-component>
修改了父组件的数据，同时影响了子组件。
prop默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态

双向绑定

可以使用.sync显式地指定双向绑定，这使得子组件的数据修改会回传给父组件。
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航