Vue组件全局组件和局部组件的一次小尝试

最新推荐文章于 2023-03-27 09:26:40 发布

_RichardYang

最新推荐文章于 2023-03-27 09:26:40 发布

阅读量127

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44916191/article/details/107548329

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

全局和局部组件的尝试1

现在我们在这里来一个全部代码的浏览

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue-组件使用</title>
  <!--  <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>
<div id="app">
  <h1>{{message1}}</h1>
  <h1>{{message2}}</h1>
  <cp2></cp2>
  <cp3></cp3>
  <cp4></cp4>
  <cp5></cp5>
</div>
<div id="app2">
  <h1>{{message1}}</h1>
  <h1>{{message2}}</h1>
  <cp2></cp2>
  <cp3></cp3>
  <cp4></cp4>
  <cp5></cp5>
</div>

<script src="../js/vue.js"></script>
<script>
  <!--
  老版组件创建-->
  const cp2 = Vue.extend({
    template: `
      <div>
        <h2>我是app1全局组件</h2>
        <p>欢迎使用我这个全局组件</p>
      </div>
    `
  })

  const cp3 = Vue.extend({
    template: `
        <div>
          <h2>我是app1局部组件</h2>
          <p>欢迎使用我这个局部组件</p>
        </div>
      `
  })

  const cp4 = Vue.extend({
    template: `
      <div>
        <h2>我是app2全局组件</h2>
        <p>欢迎使用我这个全局组件</p>
      </div>
    `
  })
  const cp5 = Vue.extend({
    template: `
        <div>
          <h2>我是app2局部组件</h2>
          <p>欢迎使用我这个局部组件</p>
        </div>
      `
  })
  <!-- 老版组件注册-->
  Vue.component('cp2', cp2)
  Vue.component('cp3', cp3)
  Vue.component('cp4', cp4)
  Vue.component('cp5', cp5)

  const app = new Vue({
    el: '#app',
    data: {
      message1: 'app1组件的使用'
    },
    // components: {
    //   cp2: cp2,
    //   cp3: cp3
    // }
  })

  const app2 = new Vue({
    el: '#app2',
    data: {
      message2: 'app2组件的使用'
    },
    // components: {
    //   cp4: cp4,
    //   cp5: cp5
    // }
  })
</script>
</body>
</html>

全局和局部组件的结果1

在这里插入图片描述

全局和局部组件的尝试2

现在我们在这里来一个全部代码的浏览

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue-组件使用</title>
  <!--  <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
</head>
<body>
<div id="app">
  <h1>{{message1}}</h1>
  <h1>{{message2}}</h1>
  <cp2></cp2>
  <cp3></cp3>
  <cp4></cp4>
  <cp5></cp5>
</div>
<div id="app2">
  <h1>{{message1}}</h1>
  <h1>{{message2}}</h1>
  <cp2></cp2>
  <cp3></cp3>
  <cp4></cp4>
  <cp5></cp5>
</div>

<script src="../js/vue.js"></script>
<script>
  // 老版组件创建
  const cp2 = Vue.extend({
    template: `
      <div>
        <h2>我是app1全局组件</h2>
        <p>欢迎使用我这个全局组件</p>
      </div>
    `
  })

  const cp3 = Vue.extend({
    template: `
        <div>
          <h2>我是app1局部组件</h2>
          <p>欢迎使用我这个局部组件</p>
        </div>
      `
  })

  const cp4 = Vue.extend({
    template: `
      <div>
        <h2>我是app2全局组件</h2>
        <p>欢迎使用我这个全局组件</p>
      </div>
    `
  })
  const cp5 = Vue.extend({
    template: `
        <div>
          <h2>我是app2局部组件</h2>
          <p>欢迎使用我这个局部组件</p>
        </div>
      `
  })
  // 老版组件注册
  // Vue.component('cp2', cp2)
  // Vue.component('cp3', cp3)
  // Vue.component('cp4', cp4)
  // Vue.component('cp5', cp5)

  const app = new Vue({
    el: '#app',
    data: {
      message1: 'app1组件的使用'
    },
    components: {
      cp2: cp2,
      cp3: cp3
    }
  })

  const app2 = new Vue({
    el: '#app2',
    data: {
      message2: 'app2组件的使用'
    },
    components: {
      cp4: cp4,
      cp5: cp5
    }
  })
</script>
</body>
</html>

全局和局部组件的结果2

在这里插入图片描述

结果

看了代码的运行效果有没有发现什么问题呢

第一张图
我们会发现在app1里面使用message2不会显示在app1这个div块里面。在app2里面使用message1不会显示在app2这个div块里面。但是注册的组件却可以全部使用
第二张图
我们会发现在app1里面使用message2不会显示在app1这个div块里面。在app2里面使用message1不会显示在app2这个div块里面。但是在app1,app2注册的组件却不可以在任意使用了。