Vue.js组件化实战：封装复用与数据流管理-优快云博客

本文链接：https://blog.youkuaiyun.com/HUSBANDL/article/details/122825570

组件化

简介：

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

全局注册组件和局部注册组件

全局注意点：

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

局部注意点：

局部注册的子组件只能在注册过的父组件中使用
components是注册组件的意思

折叠面板案例

<body>
    <div id="app">
      <my-collapse></my-collapse>
      <my-collapse></my-collapse>
      <my-collapse></my-collapse>
    </div>
    <!-- 定义折叠面板模板 -->
    <template id="my-collapse">
      <div>
        <button @click="isShow=!isShow">折叠</button>
        <div v-show="isShow">我是折叠显示的内容</div>
      </div>
    </template>
  </body>

  <script>
    let myHeader = {
      data: function() {
        return {
          isShow: false
        };
      },
      template: "#my-collapse",
      methods: {}
    };

    var vue = new Vue({
      el: "#app",
      data: {},
      methods: {},
      computed: {},
      components: {
        "my-collapse": myHeader
      }
    });
  </script>

组件传值

父传子

执行步骤如下：

1、父组件定义数据
2、父组件通过属性的方式给子组件传递数据
3、子组件通过props属性接受数据并做参数设置
4、子组件使用传递过来的数据

props细节

每一个数据项，都可以有3个属性进行约束type，类型约束，约束父组件给子组件传递的数据类型，类型可以是：Object、Array、Number、String、Boolean等几种。
default，指定默认值，如果父组件没有传递数据，可以指定默认值
required，指定该数据项是否必须传递

父组件给子组件传递数组，子组件循环遍历使用

 <body>
    <div id="app">
      <!-- <my-son :num="number"></my-son> -->
      <my-son :list="students"></my-son>
    </div>
    <!-- 定义折叠面板模板 -->
    <template id="my-son">
      <div>
        <ul>
          <li v-for="(item,index) in list">
            <h3>{{ item.name }}</h3>
            <p>{{ item.age }}</p>
          </li>
        </ul>
      </div>
    </template>
  </body>

  <script>
    let mySon = {
      data: function() {
        return {};
      },
      props: {
        list: {
          type: Array
        }
      },
      template: "#my-son",
      methods: {}
    };

    var vue = new Vue({
      el: "#app",
      data: {
        students: [
          { id: 1, name: "tom", age: 21 },
          { id: 2, name: "jim", age: 22 },
          { id: 3, name: "jack", age: 23 }
        ]
      },
      methods: {},
      components: {
        "my-son": mySon
      }
    });
  </script>

子传父

执行步骤如下：

1、子组件绑定事件

调用this.$emit方法传递数据，第一个参数是自己定义的事件名，第二个参数是传递的数据

2、父组件监听传递的事件childhandle

3、父组件中对监听的事件做处理，拿到传递的数值再在页面显示或其他处理。

兄弟组件传值

说明：兄弟组件之间没办法直接进行传值，可以通过一个中转站进行数据传递

执行步骤如下：

1、两个子组件定义并在父组件注册

2、两个子组件分别定义各自的事件，注意调用的时候互相调用

3、父组件中定义事件销毁的方法

留言板案例

<body>
    <div id="app">
      <h3>请输入你的个人见解</h3>
      <msg-list :msg="msglist"></msg-list>
      <add-msg @postmsg="receive"></add-msg>
    </div>

    <!-- 1、定义添加组件模板 -->
    <template id="add-msg">
      <div>
        <input type="text" v-model="title" />
        <textarea v-model="content" cols="30" rows="10"></textarea>
        <button @click="postMsg">点击</button>
      </div>
    </template>

    <!-- 2、定义组件列表模板 -->
    <template id="msg-list">
      <div>
        <h3>留言区内容</h3>
        <ul>
          <li v-for="(item,index) in msg">
            <p>第几楼</p>
            <p>{{ item.title }}</p>
            <p>{{ item.content }}</p>
          </li>
        </ul>
      </div>
    </template>
  </body>

  <script>
    //   3、定义添加组件对象
    let addMsg = {
      data: function() {
        return {
          title: "",
          content: ""
        };
      },
      template: "#add-msg",
      methods: {
        postMsg: function() {
          //   this.title是获取用户输入的标题  this.content是获取用户输入的内容
          this.$emit("postmsg", { title: this.title, content: this.content });
        }
      }
    };
    //   4、定义组件列表对象
    let msgList = {
      data: function() {
        return {};
      },
      props: {
        msg: {
          type: Array
        }
      },
      template: "#msg-list"
    };
    //   根组件
    var vue = new Vue({
      el: "#app",
      data: {
        msglist: []
      },
      methods: {
        receive: function(msg) {
          this.msglist.push(msg); //val是获取到的子组件传递过来的单条对象信息
        }
      },
      //   3、注册子组件
      components: {
        "add-msg": addMsg,
        "msg-list": msgList
      }
    });
  </script>