Vue Components 是VueJS的重要功能之一，可以创建自定义元素，可以在HTML中重复使用.
让我们使用一个示例并创建一个组件，可以更好地理解组件如何与VueJS一起使用.
示例
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> <script type = "text/javascript" src = "js/vue_component.js"></script> </body></html>
vue_component.js
Vue.component('testcomponent',{ template : '<div><h1>This is coming from component</h1></div>'});var vm = new Vue({ el: '#component_test'});var vm1 = new Vue({ el: '#component_test1'});在.html文件中，我们创建了两个id为 component_test 和 component_test1 的div.在上面显示的 .js 文件中，使用div ID创建了两个Vue实例.我们创建了一个与视图实例一起使用的公共组件.
要创建组件，请遵循以下语法.
Vue.component('nameofthecomponent',{ // options});创建组件后，组件的名称将成为自定义元素，并且可以在创建的Vue实例元素中使用相同的元素，即div内部使用ids component_test 和 component_test1 .
在 .js 文件中，我们使用了测试组件作为组件的名称和相同的名称用作div中的自定义元素.
示例
<div id = "component_test"> <testcomponent></testcomponent></div><div id = "component_test1"> <testcomponent></testcomponent></div>
在 .js 文件中创建的组件中，我们添加了一个模板，我们已为其分配了HTML代码.这是一种注册全局组件的方法，可以将其作为任何vue实例的一部分，如以下脚本所示.
Vue.component('testcomponent',{ template : '<div><h1>This is coming from component</h1></div>'});在执行时，相同的内容将反映在浏览器中.
组件被赋予自定义元素标签，即< testcomponent></testcomponent> .但是，当我们在浏览器中检查相同内容时，我们不会注意模板中存在的纯HTML中的自定义标记，如下面的屏幕截图所示.
我们还直接将组件作为vue实例的一部分，如下面的脚本所示.
var vm = new Vue({ el: '#component_test', components:{ 'testcomponent': { template : '<div><h1>This is coming from component</h1></div>' } }});这称为本地注册，组件将只是创建的vue实例的一部分.
到目前为止，我们已经看到了基本组件的基本选项.现在，让我们为它添加更多选项，如数据和方法.正如Vue实例具有数据和方法一样，组件也共享相同的内容.因此，我们将使用数据和方法扩展代码.
示例
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div> <script type = "text/javascript" src = "js/vue_component.js"></script> </body></html>
vue_component.js
Vue.component('testcomponent',{ template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>', data: function() { return { name : "Ria" } }, methods:{ changename : function() { this.name = "Ben"; }, originalname: function() { this.name = "Ria"; } }});var vm = new Vue({ el: '#component_test'});var vm1 = new Vue({ el: '#component_test1'});在上面的 .js 文件中，我们添加了一个函数，它返回一个对象.该对象具有name属性，该属性被赋值为'Ria'.这在以下模板中使用.
template:'< div v-on:mouseover ="changename()"v-on: mouseout ="originalname();">< h1>由< span id ="name"> {{name}}</span></h1></div>'创建的自定义组件，尽管数据作为组件中的函数，但我们可以像使用直接Vue实例一样使用其属性.此外，还添加了两个方法，changename和originalname.在changename中，我们正在更改name属性，在originalname中我们将其重置为原始名称.
我们还在div，mouseover和mouseout上添加了两个事件.事件的详细信息将在"事件"一章中讨论.所以现在，mouseover调用 changename 方法和mouseout调用 originalname 方法.
以下浏览器中显示了相同的显示.
如上面的浏览器所示，它显示了data属性中指定的名称，名称相同.我们还在div上分配了一个mouseover事件，还有一个mouseout事件.让我们看看鼠标悬停和鼠标移动时会发生什么.
开mouseover，我们看到第一个组件的名称更改为Ben，但是，第二个组件的名称保持不变.这是因为数据组件是一个函数，它返回一个对象.因此，当它在一个地方被更改时，在其他情况下不会被覆盖.
动态组件
使用关键字创建动态组件< component></component> 并使用属性进行绑定，如以下示例所示.
示例
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/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:red;">Dynamic Component</span></div>' } } }); </script> </body></html>输出
<component v-bind:is = "view"></component>
它有v-bind:is ="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>' } }});执行时，模板动态组件会显示在浏览器中.
免责声明：以上内容（如有图片或视频亦包括在内）有转载其他网站资源，如有侵权请联系删除
