概念
组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就调用什么样的组件。
模快化和组件化的区别
- 模快化：是从代码逻辑的角度划分的；方便代码分层开发，保证每个功能模块的职能单一；
- 组件化：是从UI界面的角度分析的；前端组件化，方便UI组件的重用
组件的创建方式：
- 方式1
1、使用Vue.extend 来创建全局Vue组件
2、通过template属性，指定组件要展示的html结构
3、使用Vue.component('组件名',创建出来的组件模板对象)
4、使用组件，直接把组件名称以HTML标签的形式引入页面
注意：驼峰式命名法要以‘-’隔开，非驼峰式明明如 mycom1 可以直接引入<mycom1></mycom1>
<div id="app">
<!-- 4、使用组件，直接把组件名称以HTML标签的形式引入页面 -->
<!-- 注意驼峰式命名法要以‘-’隔开，非驼峰式明明如 mycom1 可以直接引入<mycom1></mycom1> -->
<my-com1></my-com1>
</div>
<script>
var com1 = Vue.extend({ //1、使用Vue.extend 来创建全局Vue组件
template:'<h3>使用Vue.extend创建的组件</h3>' //2、通过template属性，指定组件要展示的html结构
})
Vue.component('myCom1',com1) //3、使用Vue.component('组件名',创建出来的组件模板对象)
var vm = new Vue({
el:'#app',
data(){
return {
}
}
})
</script>
省略步骤
Vue.component('myCom1',Vue.extend({
template:'<h3>使用Vue.extend创建的组件</h3>'
}))
再省略下
Vue.component('myCom1',{
template:'<h3>使用Vue.extend创建的组件</h3>'
})
- 方式2
使用template标签注册组件，然后引入
<div id="app">
<my-com1></my-com1>
</div>
<template id="tem1">
<div>
<h1>etemplate标签创建的组件</h1>
<h1>etemplate标签创建的组件</h1>
</div>
</template>
<script>
Vue.component('myCom1',{
template:'#tem1'
})
var vm = new Vue({
el:'#app',
data(){
return {
}
}
})
</script>
- 方式三（私有组件）：
<div id="app">
<my-com1></my-com1>
</div>
<template id="tem1">
<div>
<h1>etemplate标签创建的组件</h1>
<h1>etemplate标签创建的组件</h1>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
}
}，
components:{ //定义Vue实例的私有组件
myCom3:{
template:'#tem3'
}
}
})
</script>
组件中的data和methods
data
- 组件可以有自己的data
- 组件的data必须是一个方法 并且要用return返回一个对象
- 组件中的data使用方式和实例中的一模一样
<div id="app">
<my-com3></my-com3>
</div>
<template id="tem3">
<div>
<h1>{{msg}}</h1>
</div>
</template>
components:{ //定义Vue实例的私有组件
myCom3:{
template:'#tem3',
data ( ) {
return {
msg:'这是组件自己的私有数据'
}
}
}
}
methods
组件也有自己的methods 与Vue实例的methods使用方式一致
<div id="app">
<my-com3></my-com3>
</div>
<template id="tem3">
<div>
<h1 @cliclk="show">{{msg}}</h1>
</div>
</template>
components:{ //定义Vue实例的私有组件
myCom3:{
template:'#tem3',
data ( ) {
return {
msg:'这是组件自己的私有数据'
}
}，
methods:{
show(){ this.msg = this.msg + '123'}
}
}
}
组件切换
Vue提供了 component ,来展示对应名称的组件，:is属性，可以用来置顶要展示的组建名称；所以可以通过以下方式完成组件切换
<div id="app">
<a @click.prevent="comName='login'" href="">登陆</a>
<a @click.prevent="comName='register'" href="">注册</a>
<component :is="comName"></component>
</div>
<template id="login">
<div>
<h1>登陆组件</h1>
</div>
</template>
<template id="register">
<div>
<h1>注册组件</h1>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
comName:'login'
}
},
components:{
login:{
template:'#login'
},
register:{
template:'#register'
}
}
})
</script>
组件之间的传值
- 父组件向子组件传值
<div id="app">
<!-- 1、通过数据绑定的形式将父组件的数据传递给子组件 -->
<com1 :parentmsg="msg"></com1>
</div>
<template id="tem1">
<div>
<!-- 3、使用父组件传过来的数据 -->
<h2>我是子组件，我拿到的父组件数据：{{parentmsg}}</h2>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
msg:'父组件数据msg'
}
},
components:{
com1:{
template:'#tem1',
props:[ //2、子组件拿到父组件的数据后，先在props数组中定义（接收）后才能使用
//注意：props中的数据都是只读的无法重新赋值
'parentmsg'
]
}
}
})
</script>
- 父组件向子组件传递方法 并向父组件传参
<div id="app">
<!-- 1、父组件通过事件绑定传递给子组件方法 show -->
<com1 @func="show"></com1>
</div>
<template id="tem1">
<div>
<!-- 3、子组件调用方法 -->
<button @click="parentshow">我是子组件，我要调用父组件的show方法</button>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
msg:'父组件数据msg'
}
},
methods:{
show(data){
console.log('父组件的方法-----子组件的参数：'+data)
}
},
components:{
com1:{
template:'#tem1',
data(){
return {
msg:'我是子组件的数据'
}
},
methods:{
parentshow(){
this.$emit('func',this.msg) //2、子组件通过 $emit 接收父组件传过来的方法 第二个位置传参
}
}
}
}
})
</script>
- 子组件向父组件传值
其实以上方法基本就实现了向父组件传值，可以稍微改下代码
<div id="app">
<com1 @func="show"></com1>
<span>{{msg}}</span>
</div>
<template id="tem1">
<div>
<button @click="parentshow">我是子组件，我要调用父组件的show方法</button>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data(){
return {
msg:'父组件数据msg'
}
},
methods:{
show(data){
//在点击同时，父组件已经拿到了子组件的数据，赋值给data里边的数据就行了
this.msg=data
}
},
components:{
com1:{
template:'#tem1',
data(){
return {
msg:'我是子组件的数据'
}
},
methods:{
parentshow(){
this.$emit('func',this.msg)
}
}
}
}
})
</script>
网友评论