Vuejs教程-Vue.js组件

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

示例解释

在上面的示例中，我们创建了两个ID为component_test1和component_test2的div。一旦创建了组件，组件名称将成为自定义元素，并且我们可以在Vue实例元素内使用此自定义元素，即在ID为component_test1和component_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>'
        }
    }
});

执行程序后，将会看到以下输出：

输出：

在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

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

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

示例解释

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

<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>'
        }
    }
});

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

Vuejs教程-Vue.js组件

示例解释

组件的本地注册

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

Vue.js动态组件

示例解释

推荐文章

其它