vue 组件

全局组件注册：

<test1 id="app-15" :p="p"></test1>

    /*组件*/
    Vue.component("test1", {
        data: function () {
            return {
                count: 0
            }
        },
        props: ['p'],
        template: "<button @click='count++'>data count: {{count}} prop:{{p}}</button>"
    })

    var app15 = new Vue({
        el: "#app-15",
        data: {
            p: 'app15'
        }
    });

为保持组件独立性，data属性为方法返回值。组件也可以使用组件

组件注册时除去el属性，其他属性都可以使用，新添加template模板属性与html中书写一样。注意template必须只有一个根节点。

通过组件props属性可以通过标签属性传递参数，当然一个对象的属性可能有很多，这时你只需要传递一个对象就好了。

<test2 id="app-16" :obj="obj"></test2>

    /*组件*/
    Vue.component("test2", {
        props: ['obj'],
        template: "<p>data count: {{obj.title}}</p>"
    })


    var app16 = new Vue({
        el: "#app-16",
        data: {
            obj: {
                title: "app16"
            }
        }
    });

除去数据绑定外，组件事件传递也是很重要的一部分

<test2 id="app-16" :obj="obj" @cli="setText"></test2>


    /*组件*/
    Vue.component("test2", {
        props: ['obj'],
        methods: {
            cli2: function () {
                this.obj.title = "click2"
            }
        },
        template: "<div><p>data count: {{obj.title}}</p><button @click=\"$emit('cli',100)\">click</button><button @click=\"cli2\">click2</button></div>"
    })


    var app16 = new Vue({
        el: "#app-16",
        data: {
            obj: {
                title: "app16"
            }
        },
       methods: {
            setText: function (val) {
                this.obj.title = "click"+val
            }
        }
    });

在组件内自定义通过$emit自定义方法名，在组件上监听自定义方法名实现组件方法的监听与参数的传递

<div id="app-17">
    <button @click="se('test1')">test1</button>
    <button @click="se('test2')">test2</button>
    <br>
    <component :is="activeComponent" :p="p" :obj="obj" @cli="setText"></component>
</div>

    var app17 = new Vue({
        el: "#app-17",
        data: {
            activeComponent: "test1",
            obj: {
                title: "app16"
            },
            p: "app17"
        },
        methods: {
            se: function (componentName) {
                this.activeComponent = componentName;
            },
            setText: function (val) {
                this.obj.title = "click" + val
            }
        }
    });

动态组件通过<component>标签和:is属性指定组件实现组件的切换，:is必须传入字符串。<keep-alive>包裹的<component>元素会缓存组件数据。

在动态组件之外还有异步组件，但是我对它无感就不写了。

在vue中字符串必须加引号，方法最好加括号(不加括号也能运行)，在vue中命名最好不要使用大写

prop验证与默认值

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

组件默认继承html中的组件属性，在注册组件时可以添加inheriattrs:false禁用属性继承，class与style除外

vue具有插槽功能能够更灵活的处理数据。插槽就是在组件标签内写入内容，替代<slot></slot>在组件中的位置

<test3 id="app-18">
    插槽插入内容
    <template v-slot:slot2>插槽2插入内容</template>
</test3>

var app18 = new Vue({
        el: "#app-18",
    });

/*组件*/
Vue.component("test3", {
    template: "<div><p><slot>默认插槽内容</slot></p><p><slot name='slot2'>插槽2默认内容</slot></p></div>"
})

插槽内可以使文字、html节点、组件等，插槽内数据的作用域为实例，在组件没有插入内容时<slot></slot>内默认数据就会显示。可以使用多个插槽，不过这需要为插槽命名。可以通过在slot标签绑定属性实现在使用组件时跨作用域访问。插槽名字可以是动态的。

不同作用域实例获取与监听

在实例方法内可以通过 this.$root 获得实例本身

在实例内可以通过 this.$parent 获得父组件实例

在实例内组件可以通过 “自定义名+s” 的属性命名组件，通过 this.$自定义名s.属性

在$emit传递的方法可以通过以下方法进行监听

• 通过 $on(eventName, eventHandler) 侦听一个事件
• 通过 $once(eventName, eventHandler) 一次性侦听一个事件
• 通过 $off(eventName, eventHandler) 停止侦听一个事件