Vue组件component基本用法
一、注册组件
1、全局组件
<div id="app">
<mycom></mycom>
</div>
<script>
Vue.component('mycom',{
data(){
return {
title: '我是标题',
content: '我是内容'
}
},
template: '<div>这里是组件内容:{{ content }}</div>'
});
var vm=new Vue({
el:'#app'
})
</script>
2、私有组件
<div id="app">
<hello></hello>
</div>
var vm=new Vue({
el:'#app',
components: {
hello: {
template: '<div>这是私有组件</div>'
}
}
})
二、组件切换
<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:'<div>登录组件</div>'
});
Vue.component('register',{
template:'<div>注册组件</div>'
});
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: '<div>显示父组件信息:{{ parmsg }}</div>',
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:'<div>登录组件</div>',
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
}
})
