极客教程Vue.js 组件
Vue.js 组件是 Vue.js 的最重要的功能之一，用于创建可在 HTML 中重复使用的自定义元素。组件是具有名称的可重用的 Vue.js 实例。我们可以在根 Vue.js 实例中将一个组件用作自定义元素。
以下是创建组件的语法。
语法：
Vue.component('组件的名称',{ // 选项});
让我们创建一个组件来更好地了解如何使用 Vue.js。
请参阅以下示例：
index.html 文件：
<html>
<head>
<title>Vue.js Component</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>
<div id = "component_test2">
<testcomponent></testcomponent>
</div>
<script src="index.js"></script>
</body>
</html>
index.js 文件：
Vue.component('testcomponent',{
template : '<div><h1>This is a component example</h1></div>'
});
var vm = new Vue({
el: '#component_test1'
});
var vm1 = new Vue({
el: '#component_test2'
});
让我们使用一个简单的 CSS 文件使输出更具吸引力。
index.css 文件：
html, body {
margin: 5px;
padding: 0;
}
程序执行后，将看到以下输出：
输出：
This is a component example
This is a component example
示例解释
在上面的示例中，我们在 index.html 文件 中创建了两个带有 id 为 component_test1 和 component_test2 的 div。一旦创建了一个组件，组件的名称就会成为自定义元素，我们可以在创建的 Vue 实例元素中使用此自定义元素，即在具有 id 为 component_test1 和 component_test2 的 div 内部。在此示例中，我们使用 test component 作为组件的名称，并在 div 中使用相同的名称作为自定义元素。
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<div id = "component_test2">
<testcomponent></testcomponent>
</div>
在 index.js 文件 中，我们创建了两个具有相应 div 标识符的 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 实例的一部分，并在 index.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 文件:
<html>
<head>
<title>Vue.js Component</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>
<div id = "component_test2">
<testcomponent></testcomponent>
</div>
<script src="index.js"></script>
</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'
});
var vm1 = new Vue({
el: '#component_test2'
});
在上面的 Index.js 文件中，我们添加了一个数据，形式为返回对象的函数。该对象具有一个名为 name 的属性，该属性已赋值为“Panda”。请参见以下示例中使用的模板。
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"
}
在这里，我们在组件中将数据用作函数，并且我们的使用方式与直接 Vue 实例的方式相同。在这里，我们使用了两个方法，changename 和 originalname。在 changename 中，我们正在更改 name 属性，在 originalname 中，我们正在将其重置回原始名称。
我们还在 div 上添加了两个事件，mouseover 和 mouseout。在这里，mouseover 事件用于调用 changename 方法，mouseout 事件用于调用 originalname 方法。
现在，执行上述程序以查看输出。在程序执行之后，您将看到以下输出：
输出：
您可以看到输出显示了我们在 Index.js 文件的数据属性中设置的分配名称“Panda”。我们还在 div 上分配了一个 mouseover 和一个 mouseout 事件。因此，在 mouseover 上，您将看到组件的名称被更改为 Alex，在 mouseout 时，它将保持与 Panda 相同。
动态组件是指在构建时未定义在应用程序中的组件。我们不在任何Vue.js模板中定义它。相反，动态组件在运行时实例化并放置在应用程序中。在Vue.js中，使用关键字<component></component>来创建动态组件，并使用属性进行绑定。让我们通过示例来更清楚地理解它。
Index.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;">这是一个动态组件示例</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;">这是一个动态组件示例</span></div>'
}
}
});
让我们使用一个简单的CSS文件来使输出更加吸引人。
Index.css文件：
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出：
输出：
这是一个动态组件示例
示例解释
在上面的示例中，您可以看到使用以下语法创建动态组件。
<component v-bind:is="view"></component>
这里，它有 v-bind:is =”view”，并分配了一个值view。在Vue实例中定义View如下所示。
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style="font-size:25;color:red;">动态组件</span></div>'
}
}
});
运行后，您会看到模板在浏览器中显示为“This is a Dynamic Component Example”。