组件化开发

最新推荐文章于 2024-07-30 16:49:30 发布

北栀໊ღ

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量176

点赞数

分类专栏： VUE 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/whlovedlw/article/details/125501386

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.组件的基本使用

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过创建的 Vue 根实例中，把这个组件作为自定义元素来使用：。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 3.使用组件 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <cpnc></cpnc>
</div>
<script src="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>
</body>
</html>

1.1 创建组件构造器对象

template中是组件的DOM元素内容。

1.2 注册组件

1.全局注册，通过。Vue.component
2.局部注册，通过。components:{cpnc:cpnc}

2. 全局组件和局部组件

组件的注册方式有两种，一种是全局组件一种是局部组件。

  <div id="app">
    <h2>全局组件</h2>
    <my-cpn></my-cpn>
    <h2>局部组件</h2>
    <cpnc></cpnc>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    // 1.创建组件构造器对象
    const cpnc = Vue.extend({
      template:`
        <div>
          <h2>标题</h2>
          <p>内容1</p>
          <p>内容2</p>
        </div>`
    })
    // 2.注册组件（全局组件，可以在多个vue实例中使用）
    Vue.component('my-cpn', cpnc)

    const app = new Vue({
      el:"#app",
      components:{//局部组件创建
        cpnc:cpnc
      }
    })
  </script>

全局组件，可以在多个vue实例中使用，类似于全局变量。使用方式注册，直接使用调用。是全局组件的名字，是定义的组件对象。

局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。使用方式与全局变量一样，直接使用调用

北栀໊ღ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件化开发

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过创建的 Vue 根实例中，把这个组件作为自定义元素来使用：。 1.1 创建组件构造器对象中是组件的DOM元素内容。 1.全局注册，通过。Vue.component 2.局部注册，通过。components:{cpnc:cpnc} 组件的注册方式有两种，一种是全局组件一种是局部组件。全局组件，可以在多个vue实例中使用，类似于全局变量。使用方式注册，直接使用调用。是全局组件的名字，是定义的组件对象。局部组
复制链接

扫一扫