Vue组件

最新推荐文章于 2024-05-09 14:10:21 发布

你得雪

最新推荐文章于 2024-05-09 14:10:21 发布

阅读量2.5w

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59542187/article/details/121863714

版权

一、组件化

1.1简介

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

1.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>

注意点

1.组件中的data是一个函数，不是对象

2.组件中必须有一个唯一的根元素

3.模板中内容较多时候建议使用模板字符串

1.2局部注册组件

<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>
  </body>

  <script>
    let myHeader = {
      data: function() {
        return {
          title: "头部"
        };
      },
      template: "#my-header",
      methods: {
        handle: function() {
          console.log(this.title);
        }
      }
    };
    let myFooter = {
      data: function() {
        return {
          title: "底部"
        };
      },
      template: "#my-footer",
      methods: {
        handle: function() {
          console.log(this.title);
        }
      }
    };
    var vue = new Vue({
      el: "#app",
      data: {},
      methods: {},
      computed: {},
      components: {
        "my-header": myHeader,
        "my-footer": myFooter
      }
    });
  </script>

注意

1.局部注册的子组件只能在注册过的父组件中使用