Vue全局组件

最新推荐文章于 2024-06-28 18:39:53 发布

有很多梦想要实现

最新推荐文章于 2024-06-28 18:39:53 发布

阅读量441

点赞数 9

分类专栏： Vue组件专讲文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45134711/article/details/139625584

版权

Vue组件专讲专栏收录该内容

6 篇文章 0 订阅

订阅专栏

全局组件

首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。谢谢大家啦

// 定义一个全局组件
Vue.component('my-component', {
  template: '<div class="my-component">{{ message }}</div>',
  data() {
    return {
      message: 'Hello from MyComponent!'
    };
  }
});

// 创建 Vue 实例
new Vue({
  el: '#app',
  template: `
    <div>
      <h1>Hello from Parent Component!</h1>
      <my-component></my-component>
    </div>
  `
});

这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>


Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

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

📌在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

内置模板

📌在component中直接书写template,极度不推荐

<script src="../../vue.js"></script>

  <body>
    <div id="app">
      {{title}}
      <!-- 全局组件的使用 -->
      <hello></hello>
      <hello></hello>
      <hello></hello>
      <!-- 多次使用相当于多次new，所有的组件使用之间并无关联 -->这部分在后来的VueComponent中会有解释
    </div>
  </body>
  
  <script>
  new Vue({
    el:"#app"
  })
    // 定义全局组件
    // component组件定义("组件名字",{组件数据})
    Vue.component("hello", {
      // 定义当前组件的结构
      template: `<div>
                        <p>这是{{title}}组件</p>
                        <span>{{num}}</span>
                        <hr>
                        <button @click="add">按钮</button>
                    </div>`,
      // 定义当前组件的数据
      data() {
        return {
          title: "hello world",
          num: 0,
        };
      },
      // 定义当前组件的方法
      methods: {
        add() {
          this.num++;
        },
      },
    });
  </script>

📌但是以上案例并不推荐使用，因为在js的字符中书写html代码，不会自动进行语法检查，不方便书写，也不方便调试

引入模板

📌建议使用vue提供的template标签，创建模板，然后再注册到组件

<script src="../../vue.js"></script>

  <body>
    <div id="app">
      <!-- 使用全局组件 -->
      <world></world>
    </div>
  </body>
  
  <!-- 使用模板 -->
  <template id="aaa">
    <div>
      <h4>{{title}}</h4>
      <input type="text" v-model="msg" />
      <span>{{msg}}</span>
    </div>
  </template>
  
  <script>
    let app = Vue.createApp({
      data() {
        return {
          title: "这是全局组件",
        };
      },
    });
    
    // 定义全局组件方法二
    // component组件定义("组件名字",{组件数据})
    app.component("world", {
      template: "#aaa",
      // 定义当前组件的数据
      data() {
        return {
          title: "hello world",
          msg: "今天不太开心",
        };
      },
    });
    app = app.mount("#app");
  </script>