一、定义Vue组件
什么是组件:组件的出现,就是为了拆分 vue 实例代码量,能够让我们以不同的组件来划分不同的功能模块,将来根据功能的需要,调用对应的组件。
组件化和模块化的区别:
模块化:是从代码逻辑的角度进行划分,方便代码分层开发,保证每个模块的功能单一
组件化:是从UI界面的角度进行划分,前端的组件化,方便UI组件的重用
1.1 创建组件的方式一
<div id="app">
<!--如果使用组件,直接把组件名以html标签的形式引入到页面即可-->
<mycom1></mycom1>
</div>
<script type="text/javascript">
//1.1 使用Vue.extend 来创建全局的 Vue 组件
var com1=Vue.extend({
template:'<p>我是一个由Vue.extend 创建出来的p</p>'
})
//1.2 使用Vue.component('组件名',创建出来的组件模板对象)
//如果使用Vue.component 定义全局组建的时候,参数一是组件名称,
//如果使用了驼峰命名,在引用组件的时候需要把大写的驼峰转为小写,同时在两个单词使用 - 连接
//如:Vue.component('myCom1',com1),引用时: <my-com1></my-com1>
//如果不使用驼峰,则直接将名称拿来使用即可
Vue.component('mycom1',com1)
上面的script代码可以简写成下面的形式:
Vue.component('mycom1',Vue.extend({
template:'<h2>我是简写的h2</h2>'
}))
1.2 创建组件方式二
//注意:不论是那种方式创建出来的组件,template 属性指向的模板内容必须有且只有一个根元素
//不能写为:template:‘我是由Vue.component创建出来的组件123
’
Vue.component('mycom2',{
template:'<span>我是由Vue.component创建出来的组件</span>'
})
1.3 创建组件方式三
1 script 代码
Vue.component('mycom3',{
template:'#temp'
})
2 样式应用
<div id="app">
<mycom3></mycom3>
</div>
<!--在被控制的 #app 外面,使用template元素,定义组件模板-->
<template id="temp">
<div>
<h1>我是template元素定义的组件</h1>
<p>我是一个p</p>
</div>
</template>
1.4 定义私有组件
var vm=new Vue({
el:'#app',
data:{},
methods:{},
components:{ //定义私有组件
login:{
template:'#temp2'
}
}
});
组件的应用:
<div id="app">
<login></login>
</div>
<template id="temp2">
<div>
<p>我是私有组件</p>
</div>
</template>
1.5 组件中的data
<div id="app">
<mycom1></mycom1>
</div>
<template id="temp">
<div>
{{msg}}
</div>
</template>
//组件可以有自己的data 数据
//组建的data数据和 实例的data数据不同点,实例的data是一个对象,但是组件的data必须是一个方法
//组件的中data 除了是一个方法之外,在方法内部,还必须返回一个对象才行
//组件中的data数据,使用方式和实例中的data一样
Vue.component('mycom1',{
template:'#temp',
data:function(){
return {
msg:'这是组件中data定义的数据'
}
}
})
二、组件实现切换
2.1 使用v-if和v-else结合flag实现切换
<div id="app">
<a href="#" @click.prevent="flag=true">登录</a>
<a href="#" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script type="text/javascript">
Vue.component('login',{
template:'<p>登录</p>',
})
Vue.component('register',{
template:'<p>注册</p>',
})
2.2 使用Vue提供的component 元素实现组件的切换
<div id="app">
<a href="#" @click.prevent="comName='login'">登录</a>
<a href="#" @click.prevent="comName='register'">注册</a>
<!--Vue提供了 component 来展示对应名称的组件-->
<!--component 是一个占位符,is后面是用来指定要展示的组件名陈-->
<component :is="comName"></component>
</div>
<script type="text/javascript">
Vue.component('login',{
template:'<p>登录</p>',
})
Vue.component('register',{
template:'<p>注册</p>',
})
三、组件传值
3.1 父组件向子组件传递值(data 和props)
在script标签中
var vm=new Vue({
el:'#app',
data:{
msg:'123,父组件'
},
methods:{},
components:{
mylogin:{
template:'<h1>这是子组件----{{parentmsg}}</h1>',
props:['parentmsg']
}
}
});
应用:
<div id="app">
<mylogin v-bind:parentmsg="msg"></mylogin>
</div>
3.2 父组件向子组件传递方法
<script type="text/javascript">
var login={
template:'#temp',
data(){
return {
sonmsg:{age:5,name:'柯南'}
}
},
methods:{
myclick(){
/*父组件通过this.$emit('func')来向子组件传递方法,
* 第二个参数为传递过去的函数的参数,可以为多个*/
this.$emit('func',this.sonmsg)
}
}
}
var vm=new Vue({
el:'#app',
data:{
datamsg:null
},
methods:{
show(data){
/*console.log('我是父组件的方法')*/
this.datamsg=data
}
},
components:{
mylogin:login
}
});
</script>
应用:
<div id="app">
<!--父组件向子组件传递方法,使用的是事件绑定机制,v-on:,绑定
后面的名字func要与下面代码中的this.$emit('func')保持一致-->
<mylogin @func="show"></mylogin>
</div>
<template id="temp">
<div>
<h1>我是子组件</h1>
<input type="button" value="父组件向子组件传递方法" @click="myclick"/>
</div>
</template>