vue.js快速上手笔记-组件（二）

1，全局组件和局部组件

<script src="~/Scripts/lib/vue/vue.js"></script>

<div id="app1">
    <t_alert></t_alert>
</div>
<div id="app2">
    <t_alert></t_alert>
    <t_alert></t_alert>
</div>

<script>
    //先在vue里面注册组件
    //这种是全局的主键，使用 t_alert 作为标签名就可以了
    //Vue.component('t_alert', {
    //    template: '<input type="button" v-on:click="On_Click" value="点击"/>',
    //    methods: {
    //        On_Click: function () {
    //            alert('ok')
    //        }
    //    }
    //});

    //非全局，在指定作用域中，添加主键 components(复数)
    var t_alert_component = {
        template: '<input type="button" v-on:click="On_Click" value="点击"/>',
        methods: {
            On_Click: function () {
                alert('ok')
            }
        }
    }

    new Vue({
        el: "#app1",
        components: {
            't_alert': t_alert_component
        }
    })

    //new Vue({
    //    el: "#app2",
    //    data: {

    //    }
    //}) 
</script>

2，配置组件，数据使用

<div id="app1">
    <did></did>

</div>
<style>
    .btn {
        background-color: red;
    }
</style>
<script>
    Vue.component('did', {
        template: '<button :class="{btn:flag}" v-on:click="On_Click">点一点 {{ count }}</button>',
        data: function () {
            return {
                count: 0,
                flag: false,
            }
        },
        methods: {
            On_Click: function () {
                if (!this.flag) {
                    this.count++;
                } else {
                    this.count--;
                }
                this.flag = !this.flag;
            }
        }
    });
     
    new Vue({
        el: "#app1"
    })
</script>

3，配置组件，template 元素放到 html中

<style>
    .btn {
        background-color: red;
    }
</style>
<div id="app1">
    <dyd></dyd>
</div>

<template id="dyd-component-tpl">
    <button :class="{btn:flag}" v-on:click="On_Click">点一点 {{ count }}</button>
</template>

<script>
    Vue.component('dyd', {
        template: '#dyd-component-tpl',
        data: function () {
            return {
                count: 0,
                flag: false,
            }
        },
        methods: {
            On_Click: function () {
                if (!this.flag) {
                    this.count++;
                } else {
                    this.count--;
                }
                this.flag = !this.flag;
            }
        }
    });

    new Vue({
        el: "#app1"
    })
</script>

4，自定定义属性向组件传参，外(父)部标签向(子)组件内部传递（

主要用到 组键的  props: [ "zdy" ] 

<div id="app1">
    <dyd zdy="123" aa="abc"></dyd>
</div>

<template id="dyd-component-tpl">
    <button v-on:click="On_Click">点一点 {{ this.name }} {{ this.zdy }}</button>
</template>
<script>
    var dydStr = {
        template: '#dyd-component-tpl',
        props: ["zdy", "aa"],  //加入标签的属性名称
        methods: {
            On_Click: function () {
                alert(this.aa)
            }
        },
        data: function () {
            return {
                name:"测试"
            };
        }
    }
    new Vue({
        el: "#app1",
        components: {
            'dyd': dydStr
        }
    })
</script>

5，子组件向父组件传传递，通过自定义事件，用$emit(eventName)来触发

<div id="app">
    <p>{{ son_counter }}</p>
    <p>{{ father_show }}</p>
    <button-counter v-on:inst="jrsj(arguments)"></button-counter>
    <!--注意$emit 传参方式 形参 arguments 是固定的 -->
</div>


<script>

Vue.component('button-counter', {
  template: '<button v-on:click="son_click">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
      son_click: function () {
      this.counter += 1
      this.$emit('inst', { 'a': '子json数据' }, this.counter);
    }
  },
})  
    var app = new Vue({
        el: "#app",
        data: {
            father_counter: 0,
            father_show: ""
        },
        methods: {
            jrsj: function (data) {                 
                this.father_show = data[0].a;
                this.father_counter = data[1];  
            }
        } 
    }) 

</script>