vue基础(3)

插槽slot

普通插槽

使用:在子组件中使用 <slot></slot>占位,就可以在组件的标签中输入内容,放到插槽位置显示
<组件名><h1>这里的内容会呈现在插槽中</h1></组件名>

具名插槽

<slot name='aa'></slot> 使用name属性给插槽命名
使用 <template v-slot:aa></template> 标签和v-slot指令来使用

动态插槽

<slot name='aa'></slot> 使用name属性给插槽命名
使用 <template v-slot:[变量]></template> 
v-slot指令的值使用[]包裹起来,就可以解析里面的变量

生命周期

注意:严格区分大小写;
beforeCreate 创建之前 dom还没有获取,没有属性;
created 创建完成 有属性,有el 但是没有挂载;
beforeMount 挂载之前 有dom 没有挂载
mounted 挂载完成 数据加载完成;
beforeUpdate 更新之前;
updated 更新完成
beforeDestroy 销毁之前;
destroyed销毁之后

兄弟之间通信(bus公交事件总线

• 创建事件总线,就是实例化一个空Vue对象赋值给一个变量
• 通过这个对象调用.$emit(‘消息名’,‘值’)发布消息
• 使用.$on(‘消息名’,处理函数) 用来监听
• .$off(‘消息名’) 销毁)

 // 1.创建事件总线,就是实例化一个空Vue对象赋值给一个变量
	 var bus = new Vue()
        Vue.component('wxauthor',{
            template:`
                <div>
                    <input type='text' ref='neirong'/>
                    <button @click='setwx'>发布</button>
                </div>
            `,
            methods:{
                setwx(){
                    // 2发布 bus.$emit
                    bus.$emit('wxtext',this.$refs.neirong.value)
                }
            }
        })
        Vue.component('wxuser',{
            template:`
                <div>
                    用户接收
                </div>
            `,
            mounted(){
                //生命周期函数,到组件的dom被渲染完成后,自动执行
                
                //3监听
                bus.$on('wxtext',(da)=>{
                    console.log(da)
                })  
            },
 	destroyed(){
	//防止组件创建销毁几次后会重复调用,在这里可以销毁
                bus.$off('wxtext')
            }
        })

        new Vue({
            el:'#box'
        })
        

自定义指令directive

作用:自定义指令,用来操作顶层dom;

Vue.directive('aa',{
            //aa代表自定义的指令名
            <!-- 指令生命周期 -->
            inserted(el){
                //创建阶段
                //插入  当前节点插入父节点中
                <!-- el可以获取到节点在哪使用这个指令就能获取当前元素的节点 -->
el.style.color=b.value
            },
            update(){
 				//当数据发生改变时调用此方法(生命周期方法)
                <!-- 指令-更新生命周期 -->
            }
        })

    用法 <p v-aa:"参数"><p>   v-aa代表自定义的指令名

filter过滤器

全局过滤器

作用:可以在任何地方使用

Vue.filter('ming',function(da){

})

使用: {{属性|过滤器名字}}

局部过滤器

在组件或vue实例里面使用

filters:{
	过滤器名(){
	}
}

定义的是局部过滤器,只能在自己的组件内部使用