Vue组件

什么是vue组件？

在vue开发中，为了能让一些页面中的元素使用性和复用性更高我们可以将一些html元素封装成可用的一些组件或者是模板。然后通过嵌套的方式进行在页面中嵌套使用，实现一种积木式编程。

如何使用vue组件？

1. 通过Vue.extend()声明组件
   Vue.extend是vue提供出来给我们实现组件的函数

   //组装组件（声明组件）
   var MyComponent = Vue.extend({
      //被封装的html内容
      template: '
   This is your first vue components!
   '，
      //绑定在这个组件内的数据
      data: '',
      //监听这个组件的事件的方法
      methods: '',
      //属性，通常被用来进行数据的通信
      props: ''
   });

2. 注册组件——向vue核心容器注册这个组件
   这是为了让vue更好的管理组件（复用和删除）

   Vue.component('my-component', MyComponent);
   //注册组件，传入别名（my-component）和组件名称（MyComponent）

3. 初始化Vue.js的管理边界

   var vm = new Vue({
      el: '#app',
   });

4. 装入组件

   在页面中嵌入
   
    
   

   简单四步，完成一个组件的装载流程 ：）

已经与Vue.js组件打了个照面，该问问它点什么了

• Q1: 组件化除了视图复用性更高以外的特殊作用？
  让一个组件具有自身独立的功能——模块化！>_
• Q2: 如何在组件中进行js事件的绑定以及数据绑定？

  var MyComponent = Vue.extend({
      template: '
  ',
      methods: {
          searchList: function() {
              console.log('Your cause an event!');
          },
      },
      ready: function() {   //在模块准备就绪时触发
                console.log("Loading Complete!");
      }，
      data: function() {  //这里进行数据绑定，注意，为了方便数据的预处理，组件中的data是通过函数返回的对象
                 return {
                        result: ''
                 }
      }
  });

• Q3：那都是通过一对一的绑定来实现数据同步的吗？
  No！有种羁绊叫做组件嵌套

组件嵌套

通过组件之间的相互嵌套来达到组件内部的数据同步，并且这样的机制有利于开发功能性组件（如轮播图，搜索框，评论区等）

• 父子组件通信
  • 父组件传值给子组件——只要data发生改变
    • 父组件的view发生改变，子组件的view也发生改变
    • 值传到子组件的方式是通过props属性
    • 子组件通过props数据进行view同步
      js脚本

      var child = Vue.extend({
          template: '{{ content }}
      ',
          props: ['content']
      });
      var Father = Vue.extend({
          template: '
      ',//将message代理到content属性中
          data: function() {
                  return {
                          message: ''
                  }
           },
          method: {
                sendMessage: function( event ) {  //触发事件的事件列表
                   this.message = event.target.value; //改变message的值
               }
           }
      });
      //注册父组件
      Vue.component('father-component', Father);
      //定义边界
      var vm = new Vue({
          el: '#app'
      });

      html

      运行效果：

      

      father&son

• 兄弟组件通信
  兄弟组件的通信是通过一个共同的父组件或者边界来进行桥接
  • 创建兄弟组件
  • 通过父组件“桥梁函数”的“分发”，子组件分别得到model，并同步到自己的view中去
    js脚本

    //孪生哥哥
    var twinsCompOld = Vue.extend({
    template: 'I am the old brother, my age is  {{ title }}
    ',
    props: ['title', 'bridge'],//哥哥传入控制年龄增长的回调函数
    methods: {
       GrowUp: function(event) {
              this.bridge(event.target.value);//将当前的年龄传入桥梁
       }
    }
    });
    //孪生弟弟
    var twinsCompLittle = Vue.extend({
    template: '
    I am the little brother, my age is {{ title }}
    ',
    props: ['title']//同步年龄
    });
    //父亲
    var Father = Vue.extend({
    template: '
    {{ say }}
    ',
    components: {
        'oldBrother': twinsCompOld,
        'littleBrother': twinsCompLittle
    },
    data: function() {
        var self = this; //因为执行这个函数的是子组件，因此需要将父组件的指针保存一下
        return {
              say: 'Daddy love you!',
              sonAge: 0,
              sendMessage: function( content ) { //桥梁函数
                self.sonAge = content;
                return self.sonAge;//儿子的年龄变化了
              }
        }
    }
    });
    //注册父组件
    Vue.component('father-component', Father);
    //定义边界
    var vm = new Vue({
    el: '#app'
    });

    html:

    运行效果：

    

    brother