小王的学习笔记（十六）——vue组件、组件通信

组件

全局注册

<div id="app">
        <!-- 引用组件 -->
        <cyl></cyl>
    </div>
    <script>
        // 全局注册的组件
        // cyl 是组件名 命名组件名时不要用驼峰命名法
        Vue.component('cyl',{
            //template代表该组件的模板
            // 只能有一个直接孩子节点
            template:`
            <div :style='obj' @click='test'>
                {{msg}}
            </div>
            `,
            data(){
                return {
                msg:'hello',
                obj:{
                    height:'60px',width:'200px',background:'pink'
                }
                }
            },
            created(){
                this.test()
            },
            methods:{
                test:function(){
                    alert(111)
                }
            }
        })
        //根组件
        new Vue({
            el:'#app',
        })
    </script>

局部注册

let obj = {//当前组件的模板
    template:`<div></div>`
}
let obj1 = {
    template:``,
    components
}

<div id="app">
        <info></info>
        <!-- <user></user> -->
    </div>
    <script>
        let user = {
            template:`
            <div>
                这是user组件
            </div>
            `
        }
        // 局部注册
        let info = {
            template:`
            <div>
            这是子组件
            <user></user>
            </div>
            `,
            created(){
                console.log(3)
            },
            mounted(){
                console.log(4)
            },
            // info加载子组件
            components:{
                'user':user
            }
        }
        new Vue({
            el:'#app',
            //组件的注册引入
            components:{
                'info':info,
                // 'user':user
            },
            created(){
                console.log(1)
            },
            mounted(){
                console.log(2)
            }
        })
    </script>

组件通信

通过props属性，例props:['data','title']

<div id="app">
        <user :data='msg' title='你好'></user>
    </div>
    <script>
        let user = {
            template:`<div>{{data}}{{title}}</div>`,
            //通过props属性，父组件给子组件传值
            props:['data','title'],
            data(){
                return {
                    
                }
            }
        }
        // vm是vue的实例
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            components:{
                'user':user
            }
        })
    </script>

子组件→父组件通过$emit

    <div id="app">
        {{count}}
        <con @rr='rr' @add='add'></con>
        <con @rr='rr' @add='add'></con>
        <con @rr='rr' @add='add'></con>
    </div>
    <script>
        let con = {
            template:`
                <div :style='obj'>
                    <span :data='num'>数量{{num}}</span>
                    <button @click='jia'>加</button>
                    <button @click='jian'>减</button>
                </div>
            `,
            data(){
                return{
                    num:0,
                    obj:{
                        marginTop:'20px'
                    }
                }
            },
            methods:{
                jia(){
                    this.$emit('add')
                    return this.num++
                },
                jian(){
                    this.$emit('rr')
                    return this.num--
                }
            }
        }
        new Vue({
            el:'#app',
            components:{
                'con':con,
            },
            data:{
               count:0
            },
            methods:{
               add(){
                this.count++
               },
               rr(){
                this.count--
               }
            }

        })
    </script>