vue零基础之二组件化开发-CSDN博客

本文链接：https://blog.csdn.net/uncle_Huang/article/details/101066734

一、组件化开发

1.创建组件的两种方式
var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明
Vue.component(‘组件名’,组件对象);//全局注册等于注册加声明了

2.组件类型
通用组件（例如表单、弹窗、布局类等)
业务组件（抽奖、机器分类）
页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）

3.组件开发三步曲：声明、注册、使用

实例

<body>
    <div id="app"></div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var MyHeader={
            template:`<div>head</div>`
        }


        var MyBody=Vue.extend({
            template:`<div>body</div>`
        })
       
        //语法糖
        // var MyBody={
        //     template:`<div>body</div>`
        // }

        Vue.component('MyFooter',{
            template:`
               <div>footer</div>
               `
        })


        new Vue({
            el:'#app',
            components:{
                MyHeader,
                MyBody
              
            },
            template:`
                <div>
                     <my-header></my-header>
                     <my-body></my-body>
                     <my-footer></my-footer>
                
                </div>
            `,
       
            data:function(){
                return{

                }
            }
        })
    </script>
</body>

二、slot插槽和ref、$parent

1.slot插槽
slot就是子组件里给DOM留下的坑位
<子组件>DOM</子组件>
slot是动态的DOM

2.ref获取子组件实例
识别：在子组件或元素上使用属性ref=“xxxx”
获取：this.$refs.xxxx 获取元素
$el 是拿其DOM

3. $p a r e n t 获取父组件实例（可在子组件直接使用 t h i s .$ parent即可）

实例

<body>
    <div id="app"></div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var Children={
            template:`
            <div>children</div>
            `,
            data(){
                 return{
                     msg:'hello,i am so baautiful'
                 }
            },
            created(){
                console.log(this.$parent)
            }
        }
        var Parent={
            template:`
            <div>
            parent
            <slot name="name"></slot>
            <children ref="child"></children>
            </div>
            `,
            components:{
                Children
            },
            data(){
                return{
                    parent:'this is parent'
                }
            },
            mounted(){
                // console.log(this.$refs.child)
            }
        }

        new Vue({
            el:'#app',
            components:{             
                Parent
            },
     
            template:`
                <parent>
                    <div>插槽</div>
                    <div slot="name">插槽2</div>
                </parent>
            `,
            data:function(){
                return{

                }
            }
        })
    </script>
</body>

三、父子组件的通信

1.父传子
父用子的时候通过属性传递
子要声明props:[‘属性名’] 来接收
收到就是自己的了，随便你用
在template中直接用
在js中 this.属性名用

2.子传父
子组件里通过$emit(‘自定义事件名’,变量1，变量2)触发
父组件@自定义事件名=‘事件名’监听
子组件方法里

  this.$emit('sendfather',val1,val2)

触发自定义事件
父组件里 <child @sendfather=‘mymethods’>

实例

<body>
    <div id="app"></div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
       //子组件定义好props直接用
       var Child={
            template:`
            <div>child</br>{{sendchild}}
            <button @click='sendparent'>son send something to parent</button></div>
            
            `,
            props:[
                'sendchild'
            ],
            methods:{
                sendparent(){
                    this.$emit('father','this is component from son')
                }
            }

        }
        //父组件通过属性sendchild传递数据给子组件
        var Parent={
            template:`
            <div>parent</br>{{msg}}
            <child sendchild='dady send to son' @father='reserve'></child>
            </div>`,
            components:{
                Child
            },
            data(){
                return{
                    msg:''
                }
            },
            methods:{
               reserve(val){
                   this.msg=val
               }
            }
        }
        
        new Vue({
            el:'#app',
            template:`  
                <div>
                    <parent></parent>
                </div>
            `,
            components:{
                Parent
            },
            data(){
                return{

                }
            }
        })
    </script>

</body>

四、非父子组件之间的通信

1.创建一个空实例（bus中央事件总线也可以叫中间组件）

2.利用

$emit $on

的触发和监听事件实现非父子组件的通信

Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据

3.解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信

实例

<body>
    <div id="app"></div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" >
       //创建空对象
       Vue.prototype.$bus=new Vue()
       var MyHeader={
           template:`
           <div>header</br>{{headermsg}}</div>
           `,
           data(){
               return{
                   headermsg:'information of header'
               }
           },
           created(){
               //this指向空对象，创建变量使它指向当前对象
            //    var self=this
            //    self.$bus.$on('sending',function(val){
            //     self.headermsg=val
            //    })

               //用箭头函数指向当前对象
            this.$bus.$on('sending',val=>{
                this.headermsg=val
            })
           }
       }
       var MyBody={
           template:`
           <div>body</div>
           `
       }
       var MyFooter={
           template:`
           <div>footer</br>
           <button @click='sendtohead'>button</button></div>
           `,
           methods:{
               sendtohead(){
                   this.$bus.$emit('sending','information from footer')
               }
           }
       }
       new Vue({
           el:'#app',
           template:`
           <div>
           <my-header></my-header><hr>
           <my-body></my-body><hr>
           <my-footer></my-footer>
           </div>
           
           `,
           components:{
               MyHeader,
               MyBody,
               MyFooter
           },
           data(){
               return{

               }
           }
       })
    </script>
</body>

五、vue的生命周期
1.需要频繁的创建和销毁组件
比如页面中部分内容显示与隐藏，但是用的是v-if

2.组件缓存
内置组件中
被其包裹的组件，在v-if=false的时候，不会销毁，而是停用
v-if=“true” 不会创建,而是激活
避免频繁创建组件对象的性能损耗
组件的激活和停用
activated 和 deactivated

3.成对比较
created 和 beforeCreate
A 可以操作数据 B 数据没有初始化
mounted 和 beforeMount
A 可以操作DOM B 还未生成DOM
updated 和 beforeUpdate
A 可以获取最终数据 B 可以二次修改
destroyed 和 beforeDestroy
性能调优：频繁销毁创建的组件使用内置组件包裹

实例

<body>
    <div id="app"></div>
    <script type='text/javascript' src="vue.js"></script>
    <script type='text/javascript' src="main.js">
       
    </script>
</body>

main.js

var Test={
    template:`
    <div>this is a test/{{msg}}
    <button @click="msg+='!'">msg+!</button></div>
    
    `,
    data(){
        return{
            msg:'hello'
        }
    },
    //组件创建前
    beforeCreate(){
        console.log('组件创建前')
        console.log(this.msg)
    },
    //组件创建后
    created(){
        console.log('组件创建后')
        console.log(this.msg)
    },
    //Dom挂载前
    beforeMount(){
        console.log('Dom挂载前')
        console.log(document.body.innerHTML)
    },
    //Dom挂载后
    mounted(){
        console.log('Dom挂载后')
        console.log(document.body.innerHTML)

    },
    //数据更新前
    beforeUpdate(){
        console.log('数据更新前')
        console.log(document.body.innerHTML)
    },
    //数据更新后
    updated(){
        console.log('数据更新前')
        console.log(document.body.innerHTML)
    },
    //销毁前
    beforeDestroy(){
        console.log('销毁前')
    },
    //销毁后
    destroyed(){
        console.log('销毁后')
    },
    //组件停用
    deactivated(){
        console.log('组件停用')
    },
    //组件激活
    activated(){
        console.log('组件激活')
    }
}
new Vue({
    el:'#app',
    components:{
        Test
    },
    //用内置组件<keep-alive>包裹，组件销毁变成组件停用，组件创建变成组件激活
    template:`
    <div>
        <keep-alive><test v-if='testshow'></test></keep-alive></br>
        <button @click='clickbt'>销毁组件</button>
    </div>
    `,
    
    data(){
        return{
            testshow:true
        }
    },
    methods:{
        clickbt(){
            this.testshow=!this.testshow//true变false，false变true
        }
    }

})