Vue组件化开发中的一点坑

废话不多说直接线上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件和全局组件</title>
</head>
<body>
<!--
1. 这里我们定义一个id = box_01的div


2. 定义id = box_01的div后我们在script标签内挂载该div
-->

<div id="box_01">
    <h2>{{infomation}}</h2>


    <!--
    在这里使用注册好的组件
    -->
    <info></info>
    <aaa_01></aaa_01>

</div>

<div id="box">
    <h3>
        {{message}}
    </h3>
    <info></info>
    <aaa_01></aaa_01>
</div>
<script src="vue.js"></script>
<script>
   // 第一步:创建组件构造器
   //
   //
   // -->
   const infor =Vue.extend({
       template:`
这里是标题

我是H1标题

我是H2标题

我是H3标题

我是H4标题

我是H5标题
我是H6标题
>`
}) //第二步注册组件 // Vue.component('info',infor); //第三步,使用组件 //这里需要说明的是上面创建的组件是全局组件 //可以在id = box的div范围内使用 // 也可以在 id=其他的div范围内使用, // 只不过id= 其他的div也需要使用下面这种方式new Vue //下面我们定义一个id = box_01的div,并在其内使用刚刚我们注册好的组件 const app = new Vue({ el:'#box', data:{ message:'this is my vue template', }, // 局部组件的意思是在该app内部注册 // 开头我们已经创建好了组件构造器,在这里我们直接在app内部注册(注册后只能在绑定的div内部使用) // 故称为局部组件 components:{ aaa_01:infor, // 现在分别在app和app_01内部使用该组件 }, }) const app_01 = new Vue({ el:'#box_01', data:{ infomation:"这里是id=box_01的div", } }) </script> </body> </html>

很完美是不是,但是能实现成这样你都不知道我经历了多少坑。第一个组件开发流程,里面的组件开发流程有点乱,这里不是很清晰,但是大致的把关键点指出来了:第一步:创建组件构造器;第二步注册组件。页面的名字叫全局组件和局部组件,这里我分别在

你可能感兴趣的:(局部注册,全局注册)