Vue——05-01组件的基本使用、全局组件，局部组件、父子组件的区别、注册组件的语法糖以及分离写法-阿里云开发者社区

Vue——05-01组件的基本使用、全局组件，局部组件、父子组件的区别、注册组件的语法糖以及分离写法

2023-04-19 92

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 组件的基本使用、全局组件，局部组件、父子组件的区别、注册组件的语法糖以及分离写法

首先了解一下注册的两种方式：

全局注册，通过Vue.component

局部注册，通过 components:{cpnc:cpnc}

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
            <!-- 自定义组件 -->
    <!-- <my-cpn></my-cpn> -->
    <cpnc></cpnc>
  </div>
  <script type="text/javascript">
  const cpnc = Vue.extend({
    template:
    `<div>
    <h2>标题</h2>
    <p>这是一个p标签</p>
    </div>`
  })
  // Vue.component('my-cpn',cpnc)  //全局组件化
    const vm = new Vue({
    el:'#app',
    data:{
    },
    methods:{
    },
    components:{  //局部组件化
      // cpnc:cpnc
      cpnc   //ES6语法简化写法
    }
    })
  </script>
  </body>
</html>

效果图如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
            //1、3、使用间隔符
    <my-cpn></my-cpn>
  //2、  <!-- <cpnc></cpnc> -->
  </div>
  <script type="text/javascript">
  // 
  const cpnc = Vue.extend({
    template:
    `<div>
    <h2>标题</h2>
    <p>这是一个p标签</p>
    </div>`
  })
  // Vue.component('my-cpn',cpnc)  //1、全局组件化
    const vm = new Vue({
    el:'#app',
    data:{
    },
    methods:{
    },
    components:{  //2、局部组件化
      // cpnc:cpnc
      // cpnc   //ES6语法简化写法
                ///3、这里使用驼峰命名
      myCpn:cpnc
    }
    })
  </script>
  </body>
</html>

1.在全局注册组件时，推荐组件名使用间隔符Vue.component('my-cpn', cpnc) ，也可用驼峰写法 Vue.component('myCpn',cpn)；同时父组件中只能使用，不能使用。

2.在局部注册组件时，推荐使用components: {cpnc: cpnc}或者components: {cpnc} 还有components: {myCpnc:cpnc}都可

父组件与子组件的区别

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>子组件与父组件的区别</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <cpn2>
    <!-- <cpn1></cpn1> -->
    </cpn2>
  </div>
  <script type="text/javascript">
    const cpn1 = Vue.extend({
    template: `
    <div>
                <h2>标题一</h2>
                <p>内容1...</p>
                <p>内容1...</p>
            </div>
    `
    })
    const cpn2 = Vue.extend({
    template: `
    <div>
       <h2>标题二</h2>
       <p>内容2...</p>
       <p>内容2...</p>
    <cpn1></cpn1> 
    </div>`,
    components: {
      cpn1
    }
    })
    const vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    components: {
      cpn2
    }
    })
  </script>
  </body>
</html>

就是父组件中包含一个子组件形成一个父子关系

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>子组件与父组件的区别</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
  <div id="app">
    <cpn2>
    <!-- <cpn1></cpn1> -->
    </cpn2>
  </div>
  <script type="text/javascript">
    const cpn1 = Vue.extend({
    template: `
    <div>
                <h2>标题一</h2>
                <p>内容1...</p>
                <p>内容1...</p>
            </div>
    `
    })
    const cpn2 = Vue.extend({
    template: `
    <div>
       <h2>标题二</h2>
       <p>内容2...</p>
       <p>内容2...</p>
    <cpn1></cpn1> 
    </div>`,
    components: {
      cpn1
    }
    })
    const vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    components: {
      cpn2
    }
    })
  </script>
  </body>
</html>

效果：

这种用构造器的方法写太过于繁琐，这里有另一种写法：

注册组件的语法糖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>全局组件语法糖</title>
</head>
<body>
    <div id="app">
        <!-- <cpn1></cpn1> -->
        <cpn2></cpn2>
    </div>
    <script>
        // 注册了全局组件，可以不用构造器
        Vue.component('cpn1',{
            template:`<div>
                        <h2>全局组件语法糖</h2>
                        <p>全局组件语法糖</p>
                    </div>`
        })
        const app = new Vue({
            el: "#app",
            data: {
            },
            components:{
                cpn2:{
                    template:`<div>
                        <h2>全局组件语法糖</h2>
                        <p>全局组件语法糖</p>
      <cpn1></cpn1>
                    </div>`
                }
            }
        })
    </script>
</body>
</html>

效果如下：

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

下面就用到了另外两种

组件分离写法

第一种分离写法：<script type="text/x-template" id="">

单独写一个script标签把组件写进去

例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <cpn1></cpn1>
    </div>
    <script type="text/x-template" id="cpn1">    //模板分离语法
      <div>
        <h1>h1</h1>
        <p>p1</p>
      </div>
    </script>
    <script type="text/javascript">
      Vue.component('cpn1', {        //这里不要加#号
        template: '#cpn1'            //这里要加#号
      })
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>

<script type="text/x-template" id="cpn1">

后面记得加id

输出结果：

第二种分离写法：<template>

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <cpn1>组件分离的第二种写法</cpn1>
    </div>
    <template id="cpn1">    //template标签
      <div>
        <h1>h1</h1>
        <p>p1</p>
      </div>
    </template>
    <script type="text/javascript">
      Vue.component('cpn1', {    //不加#号
        template: '#cpn1'        //加#号
      })
      const vm = new Vue({
        el: '#app',
      })
    </script>
  </body>
</html>