Vuejs教程-Vue.js组件是Vue.js最重要的特性之一,用于创建可在HTML中重复使用的自定义元素。组件是可重用的Vue.js实例,并具有名称。我们可以将组件用作根Vue.js实例内的自定义元素。

创建组件的语法如下所示:

Vue.component('组件名称', { // 选项 });

让我们创建一个组件来更好地理解Vue.js中的组件如何工作。请参考以下示例:

Index.html文件:

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js组件</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="component_test1">
        <testcomponent></testcomponent>
    </div>
</body>
</html>

Index.js文件:

Vue.component('testcomponent', {
    template: '<div><h1>This is a component example</h1></div>'
});

var vm = new Vue({
    el: '#component_test1'
});

让我们使用一个简单的CSS文件使输出更具吸引力。

Index.css文件:

html, body {
    margin: 5px;
    padding: 0;
}

执行程序后,将会看到以下输出:

输出:

This is a component example

1.png

示例解释

在上面的示例中,我们创建了两个ID为component_test1component_test2的div。一旦创建了组件,组件名称将成为自定义元素,并且我们可以在Vue实例元素内使用此自定义元素,即在ID为component_test1component_test2的div内部使用。

<div id="component_test1">
    <testcomponent></testcomponent>
</div>
<div id="component_test2">
    <testcomponent></testcomponent>
</div>

在Index.js文件中,我们创建了两个带有相应div ID的Vue.js实例。

var vm = new Vue({
    el: '#component_test1'
});

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

我们创建了一个通用组件,以供两个视图实例使用。

Vue.component('testcomponent', {
    template: '<div><h1>This is a component example</h1></div>'
});

组件的本地注册

我们可以直接将组件作为Vue.js实例的一部分进行注册,方法称为本地注册。在这种情况下,组件将仅作为所创建的Vue实例的一部分。

var vm = new Vue({
    el: '#component_test1',
    components: {
        'testcomponent': {
            template: '<div><h1>This is a component example</h1></div>'
        }
    }
});

执行程序后,将会看到以下输出:

输出:

2.png

在Vue.js组件中添加更多选项

我们可以向Vue.js组件添加更多选项,例如数据和方法。这与我们向直接的Vue.js实例添加数据和方法的方式相同。请参考以下示例:

Index.html文件:

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js组件</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="component_test1">
        <testcomponent></testcomponent>
    </div>
</body>
</html>

Index.js文件:

Vue.component('testcomponent', {
    template: '<div v-on:mouseover="changename()" v-on:mouseout="originalname();"><h1>This Custom Component is created by <span id="name">{{name}}</span></h1></div>',
    data: function() {
        return {
            name: "Panda"
        }
    },
    methods: {
        changename: function() {
            this.name = "Alex";
        },
        originalname: function() {
            this.name = "Panda";
        }
    }
});

var vm = new Vue({
    el: '#component_test1'
});

我们使用一个简单的CSS文件使输出更具吸引力。

Index.css文件:

html, body {
    margin: 5px;
    padding: 0;
}

执行程序后,将会看到以下输出:

输出:

This Custom Component is created by Panda

3.png

你可以看到,输出显示了我们在Index.js文件中的数据属性中设置的名字“Panda”。我们还在div上添加了mouseover和mouseout事件。因此,在mouseover事件上,您将看到组件的名称更改为Alex,当mouseout时,它将保持不变为Panda。

4.png

Vue.js动态组件

动态组件意味着组件的位置在构建时未定义。我们不在任何Vue.js模板中定义它。而是在运行时实例化并放置在应用程序中。在Vue.js中,使用关键字<component></component>来创建动态组件,并通过属性进行绑定。让我们看一个例子来更好地理解它。

Index.html文件:

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js组件</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="databinding">
        <component v-bind:is="view"></component>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#databinding',
            data: {
                view: 'component1'
            },
            components: {
                'component1': {
                    template: '<div><span style="font-size:25;color:Blue;">This is a Dynamic Component Example</span></div>'
                }
            }
        });
    </script>
    <script src="index.js"></script>
</body>
</html>

Index.js文件:

var vm = new Vue({
    el: '#databinding',
    data: {
        view: 'component1'
    },
    components: {
        'component1': {
            template: '<div><span style="font-size:25;color:Blue;">This is a Dynamic Component Example</span></div>'
        }
    }
});

让我们使用一个简单的CSS文件使输出更具吸引力。

Index.css文件:

html, body {
    margin: 5px;
    padding: 0;
}

执行程序后,将会看到以下输出:

输出:

This is a Dynamic Component Example

5.png

示例解释

在上面的示例中,你可以看到动态组件是通过以下语法创建的。

<component v-bind:is="view"></component>

这里使用了v-bind:is="view",并且一个值view被赋予它。View是在Vue实例中定义的,如下所示。

var vm = new Vue({
    el: '#databinding',
    data: {
        view: 'component1'
    },
    components: {
        'component1': {
            template: '<div><span style="font-size:25;color:red;">Dynamic Component</span></div>'
        }
    }
});

执行后,你会看到模板在浏览器中显示“这是动态组件示例”。

标签: vue, vuejs, vue框架, vue教程, vue学习, vue入门, vue入门教程, vue进阶, vue开发, vue框架使用, vue框架教程, vue框架编程, vue框架学习, vue框架进阶, vue框架学习教程