Vue补充

子组件之间通信 

    <div id="app">
       <p1></p1>
       <p2></p2>
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            
             Vue.component('p1',{
                template:`<div @click="fn"> 点击我变msg的数 </div>`,
                methods:{
                    fn(){
                        subEvent.$emit("getMsg")
                    }
                }
                
            });
            Vue.component('p2',{
                data(){
                    return {
                        msg:'我是子组件p2里的值 hello'
                    }
                },
                created(){
                    subEvent.$on('getMsg',()=>{this.msg=111})
                },
                template:`<div>{{ msg }}</div>`

            });
            //子组件p1获取子组件p2里的msg的值 通过中间方法  创建一个Vue实例 利用实例上的 $on和$emit方法
            var subEvent =new Vue({});
            //给实例绑定$on  subEvent.$on('名字',方法)，写在组件p2 然后p1用$emit调用


            var vm =new Vue({
                el:"#app",
               
            })
        </script>

让根实例定义数据  子组件一块改变

这个就是子组件通过props接收 

 

api  $nextTick()

created（） 生命周期函数   这个没法操作dom   要在mounted()里操作dom   如果非要操作 可以用

$nextTick()

操作dom可以直接利用$refs   如果ref写在组件  就是操作组件 写在元素上 就是操作元素

 

 

 

less  

小技能   文档搜索   crtl+f

less c   a.less b.css   就是编译a.less文件转为b。css文件