vue-component组件

一、Component 组件

组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

二、全局组件

1、语法格式

js 复制代码

Vue.component("组件名称", {
    template: "html代码",  // 组件的HTML结构代码
    data(){ //组件数据
        return {}
   },
    methods: {  // 组件的相关的js方法
        方法名(){
            // 逻辑代码
       }
   }
})

注意:

组件名以小写开头，采用短横线分割命名: 例如 hello-Word
组件中的data 必须是一个函数,注意与Vue实例中的data区分
在template模板中, 只能有一个根元素

2、代码演示

代码

js 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 使用组件 -->
      <my-header></my-header>
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    // 定义全局组件
    //组件的命名规则: 一般用短横线进行连接,左边是公司名 右边组件的作用名称
    Vue.component("my-header", {
      template: "<div><h1 @click='test'>{{title}}</h1> </div>", //template模板中 只能有一个根元素
      //组件中的data是一个函数
      data() {
        return {
          title: "测试标题",
        };
      },
      methods: {
        test() {
          alert("测试方法!");
        },
      },
    });

    var Vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
    });
  </script>
</html>

测试结果

三、局部组件

1、语法格式

相比起全局组件，局部组件只能在同一个实例内才能被调用。局部组件的写法和全局组件差不多。唯一不同就是：局部组件要写在Vue实例里面。

js 复制代码

new Vue({
    el: "#app",
    components: {
        组件名: {
            // 组件结构
            template: "HTML代码",
            // data数据
            data() { return { msg:"xxxx" };},
       },
   },
});

2、代码演示

代码

js 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 使用组件 -->
      <test-component></test-component>
    </div>
  </body>

  <script src="js/vue.min.js"></script>
  <script>
    var Vm = new Vue({
      el: "#app",
      data: {},
      methods: {},
      // 创建组件
      components: {
        "test-component": {
          template: "<div><h1>{{msg}}</h1></div>",
          data() {
            return {
              msg: "测试局部组件！",
            };
          },
        },
      },
    });
  </script>
</html>

注意: 创建局部组件，注意 components，注意末尾有 's'，而全局组件是不用+ 's' 的。这意味着，components 里可以创建多个组件。

测试结果

四、组件与模板分离

由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。

代码

js 复制代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
 </head>
 <body>
   <div id="app">
     <!-- 使用组件 -->
     <test-component></test-component>
   </div>

   <!-- 将模板写在html中，给模板指定id -->
   <template id="tmp">
     <div>
       <button @click="test">{{testmsg}}</button>
     </div>
   </template>
 </body>

 <script src="js/vue.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {},
     methods: {},
     components: {
       "test-component": {
         template: "#tmp", //此处绑定上面写的template id
         data() {
           return {
             testmsg: "测试消息~",
           };
         },
         methods: {
           test() {
             alert("测试方法！");
           },
         },
       },
     },
   });
 </script>
</html>

浏览器会把 html 里的 template 标签过滤掉。所以 template 标签的内容是不会在页面中展示的。直到它被 JS 中的 Vue 调用。
在 html 中，template 标签一定要有一个id，因为通过 id 是最直接被选中的。data 和 methods 等参数，全部都要放到 Vue 实例里面写。

测试结果