标签：Vue 呵呵 component TypeNav 组件 全局

Vue.component注册全局组件

一、不在手脚架中的注册

1、全局组件注册的语法糖 Vue.component('组件标签名',构造器对象)

// 1、创建全局组件构造器
const cpn1=Vue.extend({
    template:`
    <div>
       <h2>我是标题2</h2>
       <p>我是内容，呵呵呵呵呵呵呵</p>
    </div>
    `
});
//2、注册全局组件
Vue.component('cpn',cpn1);
/*===================等价于======================*/
//语法糖
Vue.component('cpn1',{
      template:`
       <div>
          <h2>我是标题1</h2>
          <p>我是内容，呵呵呵呵呵呵呵</p>
       </div>
        `
});

2、模板的分类写法

• script标签，注意：类型必须是text/x-template

<script type="text/x-template" id="cpn">
    <div>
      <h2>我是标题</h2>
      <p>我是内容，哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</script>

• template标签

<template id="cpn">
    <!--子组件很多标签，必须有个根节点-->
    <div>
      <h2>我是标题</h2>
      <p>我是内容，呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
    </div>
</template>

<script>
  //全局组件  
    Vue.component('cpn',{
        template:'#cpn'
    });
</script>

二、手脚架中注册全局组件

1、在components文件夹下新建组件

• 注意点，要有name（组件名）

export default {
    name: "TypeNav",
}

2、在main.js中引入全局组件，并注册

//三级联动组件---全局组件
import TypeNav from '@/components/TypeNav'
import Carousel from "@/components/Carousel"
//第一个参数：全局组件的名字。第二个参数：哪个组件
Vue.component(TypeNav.name,TypeNav);
Vue.component(Carousel.name,Carousel);

标签：Vue,呵呵,component,TypeNav,组件,全局
来源： https://www.cnblogs.com/jiajia-hjj/p/15864424.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。