组件化基本使用

简单的组件示例

```html
  <div id="app">
    <!-- 3.使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <cpnc></cpnc>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpnc = Vue.extend({
      template:`
        <div>
          <h2>标题</h2>
          <p>内容1...<p>
          <p>内容2...<p>
        </div>`
    })
    // 2.注册组件
    Vue.component('my-cpn', cpnc)
    const app = new Vue({
      el:"#app",
      data:{
      },
      components:{//局部组件创建
        cpnc:cpnc
      }
    })
  </script>
```

​  组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 `my-cpn`。我们可以在一个通过 `new Vue` 创建的 Vue 根实例中,把这个组件作为自定义元素来使用: `<my-cpn></my-cpn>`。
posted @ 2021-04-22 10:04  好吗,好  阅读(40)  评论(0)    收藏  举报