Vue组件使用总结

一、注册组件

1、全局组件

<div id="app">
    <mycom></mycom>
</div>

<script>
    Vue.component('mycom',{
        data(){
           return {
               title: '我是标题',
               content: '我是内容'
           }
        },
        template: '
这里是组件内容：{{ content }}
'
    });
    var vm=new Vue({
        el:'#app'
    })
</script>

2、私有组件

<div id="app">
    <hello></hello>
</div>

var vm=new Vue({
    el:'#app',
    components: {
       hello: {
           template: '
这是私有组件
'
       }
    }
})

二、组件切换

<div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>
    <component :is="comName"></component>
</div>

Vue.component('login',{
    template:'
登录组件
'
});
Vue.component('register',{
    template:'
注册组件
'
});

var vm=new Vue({
    el: '#app',
    data: {
        comName: 'login'
    }
})

三、值、方法传递

1、父组件向子组件传递值

<div id="app">
    <hello v-bind:parmsg="msg"></hello>
</div>

var vm=new Vue({
    el: '#app',
    data: {
       msg: '父数据哈哈'
    },
    components:{
       hello:{
           template: '
显示父组件信息：{{ parmsg }}
',
           props:['parmsg']
       }
    }
})

2、父组件向子组件传递方法

<div id="app">
    <com1 @func1="show"></com1>
</div>

<template id="tmp1">
    <div>
        <h1>子组件</h1>
        <input type="button" value="点击" @click="myclick">
    </div>
</template>


var com1={
    template: '#tmp1',
    data(){
    	return{
    	   sonmsg: '哈哈456'
    	}
    },
    methods:{
        myclick(){
            this.$emit('func1','参数123', this.sonmsg)
        }
    }
}
var vm=new Vue({
    el: '#app',
    methods: {
        show(p1, p2){
            console.log('OK。参数：'+p1+','+p2)
        }
    },
    components:{
        com1
    }
})

3、父组件通过ref调用子组件值、方法

<div id="app">
    <input type="button" value="点击" @click="getElement">
    <login ref="mylogin"></login>
</div>

var login={
    template:'
登录组件
',
    data(){
        return{
            msg: '子组件信息'
        }
    },
    methods: {
        show(){
            console.log('子组件方法')
        }
    }
}
var vm=new Vue({
    el:'#app',
    methods:{
        getElement(){
            console.log('获取子组件数据：'+this.$refs.mylogin.msg)
            this.$refs.mylogin.show()
        }
    },
    components:{
        login
    }
})