vue组件_vuejs 业务组件和公共组件

作者：羊村懒王 | 2024-05-25 03:28:16

踩

vuejs 业务组件和公共组件

一、组件化

1.简介

组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。每个组件都是Vue的实例对象。我们实例化的Vue对象就是一个组件，而且是所有组件的根组件

2.全局注册组件


<body>
    <div id="app">
      <my-header></my-header>
      <my-header></my-header>
      <my-header></my-header>
    </div>
  </body>
 
  <script>
    Vue.component("my-header", {
      data: function() {
        return {
          title: "头部标题内容"
        };
      },
      template: `
      <div>
          <button @click='handle'>点击</button>
          <div>{
  {title}}</div>
      </div>
      `,
      methods: {
        handle: function() {
          console.log(this.title);
        }
      }
    });
    var vue = new Vue({
      el: "#app",
      data: {},
      methods: {},
      computed: {}
    });
  </script>

组件中的data是一个函数，不是对象
组件中必须有一个唯一的根元素
模板中内容较多时候建议使用模板字符串比如：

3.局部注册组件


<body>
    <div id="app">
      <my-header></my-header>
      <my-footer></my-footer>
    </div>
  </body>
 
  <script>
    let myHeader = {
      data: function() {
        return {
          title: "头部标题的内容"
        };
      },
      template: `
      <div>
        <button @click="handle">点击</button>
        <p>{
  {title}}</p>
      </div>
     `,
      methods: {
        handle: function() {
          console.log(this.title);
        }
      }
    };
    let myFooter = {
      data: function() {
        return {
          title: "底部标题的内容"
        };
      },
      template: `
      <div>
        <button @click="handle">点击</button>
        <p>{
  {title}}</p>
      </div>
     `,
      methods: {
        handle: function() {
          console.log(this.title);
        }
      }
    };
    var vue = new Vue({
      el: "#app",
      data: {},
      methods: {},
      computed: {},
      components: {
        "my-header": myHeader,
        "my-footer": myFooter
      }
    });
  </script>

或者这样写也可以：


<body>
    <div id="app">
      <my-header></my-header>
      <my-footer></my-footer>
    </div>
    <!-- 定义头部组件模板 -->
    <template id="my-header">
      <div>我是头部内容{
  { title }}</div>
    </template>
    <!-- 定义底部组件模板 -->
    <template id="my-footer">
      <div>我是底部内容{
  { title }}</div>
    </template>
  <

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/620380