Vue 实例 组件 生命周期 传参 day03

1.vue 实例

实例属性：vm.$root

                  vm.$el

                  vm.$options

                  vm.$data

实例方法：vm.$set

                  vm.$delete

                  vm.$watch

                  vm.$mount

实例事件：vm.$on

                  vm.$emit

                  vm.$once

                  vm.$off

2.组件

1）全局组件

2）局部组件

    // 全局组件
    Vue.component("test",{
        template:"<strong>{{msg}}</strong>",
        data(){
            return{
                msg:"刘宇宁"
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            msg:"易烊千玺"
        },
        // 局部组件
        components:{
            test2:{
                template:"<strong>{{msg}}</strong>",
                data(){
                    return{
                        msg:"易烊千玺"
                    }
                }
            },
        }
    })

3）组件的原型链

在组件内部：VueComponent.prototype = Object.create(Vue.prototype)

原型链：组件实例 --> VueComponent.prototype --> Vue.prototype-->Object.prototype --> null

可以得出：一个组件就是一个vue实例！！

4）组件的配置对象

template

data

props

methods

5)组件的使用细节

有些标签内部只能包裹特定标签，此时要想让组件被包裹在该标签中，要使用 is="组件名称"；

组件的名称不要与一些具有特殊语义的标签名字相同，可以在名称前面写v-；

每个组件都会解析它自己的模板，谁的模板谁解析；

组件上的属性，先去props中找，没找到的属性会传递给模板标签，作为模板标签的属性。

3）组件的生命周期

挂载：

beforeCreate

created

beforeMount

mounted

更新：

beforeUpdate

updated

销毁：

beforeDestory

destoryed

生命周期的钩子里面的异步行为是不会影响后面的钩子的调用的。

4）组件间的数据传递

父向子：

        props

        深拷贝

子向父：

        自定义组件

        props

非父子：

        总线 Vue.prototype.$bus = new Vue();

        pubsub  publish/submit