W~C停用

导航

组件的注册（使用extend的旧方法）---该处是全局注册

1、创建组件构造器

 //1、创建组件构造器对象
     const cpnC = Vue.extend({
       template:`
       <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
        </div>
       `
     });

2、注册组件

//2、注册组件
      //Vue.component(组件的标签名,模版);
      Vue.component("my-cpn",cpnC);

3、使用组件(在Html中使用标签)

 

 <!--3、使用组件-->
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>

 

 

完整代码

<!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='content'>
   <!--3、使用组件-->
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>
   <my-cpn></my-cpn>
  
  </div>
  <script src='./Vue/vue.js'></script>
    <script>
      //1、创建组件构造器对象
     const cpnC = Vue.extend({
       template:`
       <div>
        <h2>我是标题</h2>
        <p>我是内容</p>
        </div>
       `
     });

      //2、注册组件
      //Vue.component(组件的标签名,模版);
      Vue.component("my-cpn",cpnC);
</script>
</body>
</html>

 

posted on 2021-02-09 23:10  W~C停用  阅读(65)  评论(0)    收藏  举报