VUE（局部组件）

最新推荐文章于 2025-02-20 17:30:00 发布

Congnandaobei

最新推荐文章于 2025-02-20 17:30:00 发布

阅读量1.2k

点赞数

分类专栏： VUE 文章标签： vue(局部组件)

本文链接：https://blog.youkuaiyun.com/Congnandaobei/article/details/93125261

版权

VUE 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件注册-局部组件</title>
  <style>
    .com-a, .com-b, .com-c, .com-e {
      padding: 5px;
      border: 1px solid #000;
    }
  </style>
  <!--  -->
</head>
<body>
  <div id="app">
    <h1>组件注册-局部组件</h1>
    <com-a></com-a>
    <br>
    <com-b></com-b>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="components/com-e.js"></script>
  <script>
    Vue.component('com-a', {
      template: `
        <div class="com-a">
          <p>com-a 组件</p>
          <com-b></com-b>
          <!-- 不能直接访问自己的后代(孙子)组件 -->
          <!-- <com-d></com-d> -->
        </div>
      `,
      components: {//局部组件定义关键字
        // key: 组件名称，value：组件选项对象
        comB: {
          template: `
            <div class="com-b">
              <p>com-b 组件</p>
              <p>{{ message }}</p>
              <!-- com-c是全局组件 -->
              <com-c></com-c>
              <com-d></com-d>
            </div>
          `,
          data () {//只能在自己里面使用
            return {
              message: 'com-b message'
            }
          },
          components: {//自己的局部组件只能在自己的父组件使用亲爹才行。
            comD: {
              template: `
                <div class="com-d">
                  <p>com-d 组件</p>
                  <com-e></com-e>
                </div>
              `,
              components: {
                // 局部组件注册
                // comE: { ... }, 
                //这里的comE是用了外部的组件,在另一个js里面
                comE: comE
              }
            }
          }
        }
      }
    })
//全局组件
    Vue.component('com-b', {
      template: `
        <div class="com-b">
          <p>全局的 com-b 组件</p>
        </div>
      `
    })
//全局组件
    Vue.component('com-c', {
      template: `
        <div class="com-c">
          <p>全局的 com-c 组件</p>
        </div>
      `
    })
//vue实例
    const app = new Vue({
      el: '#app',
      data: {},
      methods: {}
    })
    //如果在全局组件里面的用的局部组件注释了，那么会去外边找全局的组件。也就是全局组件可以在任何地方用
  </script>
</body>

</html>



因为comE引入了外部的js,comE.js代码如下
const comE = { 
  template: `
    <div class="com-e">
      <p>com-e 组件</p>
      <p>{{ message }}</p>
    </div>
  `,
  data () {
    return {
      message: 'com-e message'
    }
  }
}