关注我们

VueJS - 自定义组件

Vue组件是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实例元素中使用相同的名称，即在ID为 component_test 和 component_test1 。

在 .js 文件中，使用了一个测试组件作为该组件的名称，而同一个名称用作divs中的自定义元素。

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

在 .js 文件中创建的组件中添加了一个模板，并为其分配了HTML代码。如以下脚本所示。

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实例的一部分。

到目前为止，已经看到带有基本选项的基本组件。现在，让无涯教程添加一些其他选项，例如数据和方法。

<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 文件中添加了作为函数的数据，该数据返回一个对象。该对象具有名称属性，该属性分配了值" Ria"。在下面的模板中使用它。

template : '<div v-on:mouseover="changename()" v-on:mouseout="originalname();"><h1>Custom Component created by <span id="name">{{name}}</span></h1></div>',

尽管将数据作为组件中的功能，可以像使用直接Vue实例一样使用其属性。另外，添加了两种方法，changename和originalname。在changename中正在更改name属性，而在originalname中将其重置为原始名称。

还可以在div上添加了两个事件，mouseover和mouseout。事件的详细信息将在"Events"一章中进行讨论。因此，鼠标悬停调用 changename 方法，鼠标悬停调用 originalname 方法。

在以下浏览器中显示相同的显示。

从上面的浏览器中可以看到，它显示在data属性中分配的名称，即相同的名称。无涯教程还在div上分配了mouseover事件，还为mouseout分配了事件。一起看看将鼠标悬停和移出鼠标时会发生什么。

鼠标悬停时将看到第一个组件的名称更改为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>'
      }
   }
});

执行后，模板动态组件将显示在浏览器中。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Python实战 · 从0到1搭建直播视频平台 -〔Barry〕

结构学习力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)