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>'
}
}
});执行后，你会看到模板在浏览器中显示“这是动态组件示例”。
