组件传值之子传父

子组件向父组件传递值需要用到$emit这个属性，意思为发出一个东西。参数1：发射的事件名称 ，参数2：事件传递的参数

    <div id="app">
        <h1>父-->{{father}}</h1>
        <son @fire='shou'></son>
    </div>
 Vue.component('son', {
            template: `<h1 @click='fire'>子-->我是子组件</h1>`,
            data() {
                return {
                    sonmse: '你好啊'
                }
            },
            methods: {
                fire(value) {
                    this.$emit('fire', this.sonmse)
                }
            },
        })
         const app = new Vue({
            el: '#app',
            data: {
                father: '我是父组件信息'
            },
            methods: {
                shou(value) {
                    this.father = value
                }
            }
        });
复制代码

非父子传值

我们有时候会遇到不是父子组件传值，也就是兄弟传值，这是我们需要定义一个空的Vue实例，来委托这个空的Vue实例来帮我们发出要传递的信息，其中$emit中的参数与子传父参数一样。

<div id="app">
        <first></first>
        <second></second>
    </div>
    <script>
        //定义一个空的Vue实例对象 
        let kVue = new Vue()
        Vue.component('first', {
            template: `<h1 @click='pass'>我是first</h1>`,
            data() {
                return {
                    firstMse: '我是first的信息'
                }
            },
            methods: {
                pass() {
                    kVue.$emit('fire', this.firstMse)
                }
            },

        })
        Vue.component('second', {
            template: `<h1>我是second {{mes}}</h1>`,
            data() {
                return {
                    mes: ''
                }
            },
            mounted() {
                kVue.$on('fire', (value) => {
                    this.mes = value
                })
            },
        })
          </script>  
复制代码

插槽

slot 插槽作用：将组件之间的所有内容插入到指定的位置
我们在定义组件之后，组件之间就不可以写数据，如果想要写数据，就需要插槽，就相当于将这个信息插到这个组件之中。
具名插槽，就是给插槽起一个名字，为了让不同组件的信息保持独有，我们可以个插槽起一个名字，然后将这个具名插槽写在你想要的位置。

<div id="app">
        <first>
            <span slot="A">今天天气不错</span>
            <span slot='B'>我看看你今天乖不乖</span>
            <span>ahil1</span>
        </first>
    </div>
    <template id="first">
        <div>
            <h1>1 <slot name='A'></slot>
            </h1>
            <h1>2 <slot name='B'></slot>
            </h1>
            <h1>3 <slot name='A'></slot>
            </h1>
        </div>
    </template>
        Vue.component('first', {
            template: '#first'
        })
复制代码

Vue生命周期钩子函数

Vue2.0官网显示的Vue生命周期钩子函数有11个。

  beforeCreate() {
                console.log('在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在组件创建之前调用');
            },
            created() {
                console.log('实例创建完成之后立即被调用 但这时 el 还不可以使用');
                // console.log(this.$el);
            },
            beforeMount() {
                console.log('在挂载开始之前被调用：相关的 render 函数首次被调用');
                // console.log(this.$rednder);
            },
            mounted() {
                console.log('在内容挂载之后调用，这是el已经被挂载 也是最常用的周期函数')
                // console.log(this.$el);
            },
            beforeUpdate() {
                console.log('数据更新时调用');
            },
            updated() {
                console.log('组件DOM已经更新完成之后调用');
            },
            beforeDestroy() {
                console.log('实例销毁之前调用。在这一步，实例仍然完全可用。');
            },
            destroyed() {
                console.log('实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁');
            },
复制代码

自定义指令

除了Vue官方给我们提供的一些指令之外，我们也可以自定义指令，自定义资指令分为全局指令和局部指令
全局指令使用Vue.directive（） 第一个是指令名称，第二个是一个对象 ，里面包含inserted属性

      Vue.directive('bg', {
            // inserted 插入  指令的生命周期 在指令刚调用的时候 就会执行   相当于 monuted
            // 参数1：指令所挂载的标签
            // 参数2：数据对象
            inserted(el, data) {
                console.log(el);
                console.log(data);
                console.log(data.value);
                el.style.background = data.value
            }
        })
复制代码

局部指令写在Vue实例中

 const app = new Vue({
            el: '#app',
            data: {},
            directives: {
                color: {
                    inserted(el, data) {
                        el.style.color = data.value
                    }
                }
            }
        });
复制代码

混入

我们在写组件时，可能会遇到很多组件都有同一样的功能，这是用混入来定义这个相同的功能，可以减少大量的重复代码。

  <div id="app">
        <first></first>
        <second></second>
    </div>
    <template id="first">
        <div>
            <h1 @click='myClick'>点我获取最新时间</h1>
            <h1 @click='clickDown'>点我</h1>
        </div>
    </template>
    <script>
        let time = {
            methods: {
                myClick() {
                    alert(new Date())
                }
            },
        }
        let lifeCircle = {
            beforeCreate() {
                console.log('组件被创建了')
            },
        }
        Vue.component('first', {
            template: '#first',
            mixins: [time, lifeCircle],
            methods: {
                clickDown() {
                    console.log('年后破')
                },
                myClick() {
                    console.log('aaa')
                }
            },

        })
        Vue.component('second', {
            template: `<h1 @click='myClick'>点我啊</h1>`,
            mixins: [time]

        })
复制代码

验证传值，父传子

在进行父向子通信时，我们使用props属性来接父组件传过来的信息，抱枕之前我们会使用数组来接收，但是Vue官方推荐我们使用对象的形式，我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

 props: {
                mes: {
                    type: String
                },
                age: {
                    type: Number
                },
                font: {
                    type: String,
                    default: '一直嗨皮'
                }
            }
复制代码

元素查找

我们在Vue不需要直接操作DOM树，在我们绑定ref之后我们可以直接使用$refs来获取这个属性。

 <div id="app">
        <h1 ref='bg'>你好</h1>
        <h1 ref='color'>我们学习</h1>
        <h1 ref="a">ss</h1>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {},
            methods: {},
            mounted() {
                this.$refs.bg.style.color = 'red'
                this.$refs.color.style.background = 'orange'
                this.$refs.a.style.color = 'green'
            },
        });
    </script>
复制代码