Vue 组件的认识

组件是 Vue 强大的功能之一，Vue组件具有封装可复用的特点，能够让你在复杂的应用中拆分成独立模块使用。注意，所有的 Vue 组件同时也都是 Vue 的实例，可接受相同的选项对象。

我们可以通过全局注册和局部注册的方式来注册一个 Vue 组件，两种方式的区别在于，全局注册的组件能够在任何地方使用，其实就是所有的 Vue 实例化的时候都会去渲染这个全局组件；而局部组件只是注册在某一个 Vue 实例化对象上，只能在这个 Vue 实例化的时候会渲染，其他地方使用会被当成普通的Html标签渲染。

1.全局注册

<div id="demo" >
    <!-- Vue组件 -->
    <my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
    Vue.component("my-component", {
        template: "<div>我是一个组件示</div>"
    })
    var demo = new Vue({
        el: "#demo"
    })
</script>

2.局部注册

<div id="demo" >
    <my-component></my-component>
</div>
<script src="./vue.js"></script>
<script>
    var  demo = new Vue({
        el: "#demo",
        components: {
            "my-component": {
                template: "<div>我是一个组件</div>"
            }
        }
    })
</script>

3.父组件给子组件传递数据 (用props)

<div id="demo">
  <my-component msg="我是父组件传递的数据"></my-component>
</div>
<script src="./vue.js"></script>
<script>
    Vue.component("my-component", {
            props: ["msg"],
            template: "<div>{{msg}}</div>",
          });
    var demo = new Vue({
            el: "#demo"
    })
</script>

4.父组件动态给子组件传递数据 (用v-bind)

<div id="demo">
      <input type="text" v-model="width" />
      <width-component :width="width"></width-component>
    </div>
    <script src="./vue.js"></script>
    <script>
      Vue.component("width-component", {
        props: ["width"],
        template: '<div :style = "style"></div>',
        computed: {
          style: function() {
            return {
              width: this.width + "px",
              background: "red",
              height: "60px"
            };
          }
        }
      });
      var demo = new Vue({
        el: "#demo",
        data: {
          width: 0
        }
      });
    </script>

5.子组件给父组件动态传递数据 (用$emit)

<div id="demo">
      您现在的银行卡余额是{{ total }}
      <son-component @change="handleTotal"></son-component>
    </div>

    <script src="./vue.js"></script>
    <script>
      var app = new Vue({
        el: "#demo",
        data: {
          total: 2000
        },
        components: {
          "son-component": {
            template:
              '<div>\
              <button @click="handleincrease">+1000</button>\
              <button @click="handlereduce">-1000</button>\
              </div>',
            data: function() {
              return {
                count: 2000
              };
            },
            methods: {
              handleincrease: function() {
                this.count = this.count + 1000;
                this.$emit("change", this.count);
              },
              handlereduce: function() {
                this.count = this.count - 1000;
                this.$emit("change", this.count);
              }
            }
          }
        },
        methods: {
          handleTotal: function(value) {
            this.total = value;
          }
        }
      });
    </script>

6.非父子组件之间传递数据

<div id="demo">
      <a-component></a-component>
      <br />
      <b-component></b-component>
    </div>
    <script src="./vue.js"></script>
    <script>
      Vue.component("a-component", {
        template: '<div><button @click="handle">点击我向b组件传递数据</button></div>',
        data: function() {
          return {
            aaa: "我是来自a组件中的数据"
          };
        },
        methods: {
          handle: function() {
            this.$root.bus.$emit("a", this.aaa);
          }
        }
      });
      Vue.component("b-component", {
        template: "<div></div>",
        created: function() {
          this.$root.bus.$on("a", function(value) {
            alert(value);
          });
        }
      });
      var demo= new Vue({
        el: "#demo",
        data: {
          bus: new Vue()
        }
      });
    </script>