全局组件与局部组件

最新推荐文章于 2024-01-16 08:40:42 发布

jwz934738949

最新推荐文章于 2024-01-16 08:40:42 发布

阅读量427

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107253455

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

全局组件指的是在注册组件之后，不管任何div都可以使用该组件，使用Vue.component()来实现全局组件的注册。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件与局部组件</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
</div>
<div id="app2">
  <my-cpn></my-cpn>
</div>
<script src="js/vue.js"></script>
<script>
  // 创建组件构造器
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>这是全局组件</h2>
        <p>12345</p>
        <hr>
      </div>`
  })
  // 注册组件，全局组件
  Vue.component('my-cpn', cpnC)

  const app = new Vue({
    el: '#app'
  })

  const app2 = new Vue({
    el: '#app2'
  })
</script>
</body>
</html>

局部组件指的是只能在对应的div中使用组件，创建组件构造器与全局组件一致，但是在注册组件时，需要在对应的Vue实例中添加组件属性components，为其注册组件，形式为：'组件标签名称': '构造器'

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全局组件与局部组件</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
<div id="app2">
  <cpn></cpn>
</div>
<script src="js/vue.js"></script>
<script>
  // 创建组件构造器
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>这是局部组件</h2>
        <p>12345</p>
        <hr>
      </div>`
  })

  const app = new Vue({
    el: '#app',
    components: {
      // 注册局部组件
      'cpn': cpnC
    }
  })

  const app2 = new Vue({
    el: '#app2'
  })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全局组件与局部组件

全局组件指的是在注册组件之后，不管任何div都可以使用该组件，使用Vue.component()来实现全局组件的注册。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全局组件与局部组件</title></head><body><div id="app"> <my-cpn>&l
复制链接

扫一扫