第六章：vue2组件及组件间通信

一、组件的介绍

现代前端技术都是由组件构建成一个大型项目,最开始使用组件构建项目的可能是react,之后angular2,vue都使用组件构建大型项目

二、创建组件的几种方式

• 1、全局创建组件

  Vue.component('component2', {
      template: '<h1>我是组件2</h1>'
  })

• 2、局部创建组件

  var app = new Vue({
      el: '#app',
      data: {
  
      },
      components: {
          'component1': {
              template: '<h1>你好,我是组件1</h1>'
          }
      }
  })

三、使用组件

• 1、直接使用

  <div id="app">
      <component1></component1>
      <component2></component2>
  </div>

• 2、在组件中使用组件

  • 1、全局组件

    Vue.component('component2', {
        template: '<div>我是组件2<component4></component4></div>'
    })
    Vue.component('component4', {
        template: '<h3>组件</h3>'
    })

  • 2、局部组件

    ...
    'component1': {
        template: '<div><hello></hello></div>',
        components: {
            'hello': {
                template: '<span>hello word</span>'
            }
        }
    },
    ...

三、组件中传递数据

• 1、在组件中使用data

  ...
  'component3': {
      template: '<div>hi--{{name}}</div>',
      // 这个必须的一个函数
      data() {
          return {
              name: 'word'
          }
      }
  }
  ...

• 2、创建的组件中不能使用new Vue()中的data,因为这是别的组件的数据

• 3、组件中使用方法
• 4、组件中使用过滤器
• 5、在组件中创建组件

四、组件之间的通讯

• 1、父组件通过属性传递数据到子组件
• 2、子组件同个事件传递数据到父组件

• 3、父组件通过属性传递数据到子组件

  <div id="app">
      <!-- 属性comname传递数据name到com组件中  -->
      <com v-bind:comname="name"></com>
      <parent></parent>
  </div>

  ...
  // 创建一个父组件  
  Vue.component('parent', {
      template: '<div><child v-bind:bookname="bookname"></child></div>',
      data() {
          return {
              bookname: '西游记'
          }
      }
  });
  // 创建一个子组件
  Vue.component('child', {
      template: '<span>{{bookname}}</span>',
      props: ['bookname']
  });
  // 创建一个组件
  Vue.component('com', {
      template: '<div>{{comname}}</div>',
      // 使用props接收一个数组的数据
      props: ['comname']
  });
  var app = new Vue({
      el: '#app',
      data: {
          name: '张三',
          age: 20
      }
  })
  ...

• 4、子组件通过事件传递数据到父组件

  <div id="app">
      <!-- 通过事件绑定,com通过子组件发送过来的事件名称,appcom是父组件中事件 -->
      <com @com="appcom"></com>
  </div>

  var app = new Vue({
      el: '#app',
      data: {
  
      },
      methods: {
          appcom() {
              console.log(arguments);
          }
      },
      components: {
          'com': {
              template: '<div><input type="button" value="按钮" @click="post"/></div>',
              methods: {
                  post() {
                      // 通过this.$emit发送com事件名称到父组件,发送一个对象数据到父组件
                      this.$emit('com', {
                          'name': '张三',
                          'age': 20
                      });
                  }
              }
          }
      }
  })