八. 组件
8.1 组件化
为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块
==组件化== :从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
8.2 三种方式创建组件
8.2.1 vue.extend 创建全局组件
var com1= Vue.extend({
//通过template 属性 指定了 组件要展示的HTML结构
template:'<h1>你好一号组件</h1>'
})8.2.2 Vue.component
Vue.component('mycom1',Vue.extend({
template:'<h1>你好二号组件</h1>'
})8.2.3 组件模块对象
var login ={
template:'<h1>你好三号组件</h1>'
}8.2.4 通过template元素来定义组件的html模块
html代码:
<div id="app">
<mycom></mycom>
</div>
<template id="tem">
//组件中的template属性 指向的模板内容，有且只能有唯一的根元素来进行包裹！所以要通过div来包裹
<div>
<h1> 通过template元素 来定义组件的html模块 </h1>
<span> 很好很好 </span>
</div>
</template>
vue代码:
Vue.component('mycom',{
template:'#tem'
})8.2.5 自定义私有组件
html代码:
<div id="app">
<mycom></mycom>
</div>
<div id="app2">
<show></show>
</div>
<template id="tem2">
<h1> 定义私有组件 </h1>
</template>vue代码:
Vue.component('mycom',Vue.extend({
template:'<h1>你好,全局组件</h1>'
})
var vm =new Vue({
el:'#app',
data:{},
methods:{}
})
var vm1 =new Vue({
el:'#app2',
data:{},
methods:{},
components:{ //定义私有组件
show:{
template:'#tem'
}
}
})8.3 组件中的data和methdos
组件中的data 是 一个的方法并且方法内部返回一个对象
组件中 的data 使用方式与实例中的data方式一样
html代码:
<div id="app">
<mycom1></mycom1>
</div>
<template id="tem">
<div>
<h1>你好，这是组件++ {{msg}}</h1>
<input type="button" value="组件按钮" @click="mycom"/>
</div>
</template>vue代码:
Vue.component('mycom1',{
template:'#tem',
//组件中 的data 是 一个的方法并且方法内部返回一个对象
//组件中 的data 使用方式与实例中的data方式一样
data:function(){
return {
msg:'我是组件'
}
},
methods:{
mycom(){
console.log('这是组件的方法')
}
}
})
var vm =new Vue({
el:'#app',
data:{},
methods:{
}
})8.4 组件之间的传值和调用方法
8.4.1 props
1.子组件自定义绑定父组件的data 数据
2父组件将绑定属性名称 放到 props数组定义一下，子组件就可以使用这个属性了
html代码:
<div id="app">
<!-- 父组件将传给子组件的数据 通过属性绑定 传递到子组件内部-->
<com v-bind:parentmsg='msg'></com>
</div>vue代码:
//子组件默认不能获取父组件的data上的数据和methods的方法
var vm =new Vue({
el:'#app',
data:{
msg:'123-父组件'
},
methods:{},
components:{
//组件中的props数据都是通过父组件传递给子组件的
com:{
//子组件的data属性中数据是子组件私有的 子组件通过ajax请求回来的值 都可以存放到data中
//data数据可读可写
data:function () {
return {
num:123
}
},
template:'<h2>注册页面 === {{parentmsg}}</h2>',
//将父组件传递过来的 parentmsg 属性 现在props数组中定义一下才能使用这个数据
//props的数据只读 不能重新赋值
props:['parentmsg']
}
}
})8.4.2 this.$emit()
1.子组件 绑定事件 调用 子组件内部的方法
2.子组件使用this.$emit() 触发父组件的自定义事件
3.父组件自定义绑定的事件 调用父组件的方法并传值
html代码:
<div id="app">
<com @func="show"></com>
</div>
<template id="tem">
<div >
<input type="button" value="子组件的按钮" @click="myclick"/>
<p>看看</p>
</div>
</template>vue代码:
var com ={
template:'#tem',
data:function () {
return {
list:{name:'我是子组件' ,age:1}
}
},
methods:{
myclick(){
// console.log('ok');
// 子组件可以使用 $emit 触发父组件的自定义事件。
this.$emit('func',this.list)
}
}
}
var vm =new Vue({
el:'#app',
data:{
fromson:null
},
methods:{
show(data){
// console.log("调用了父组件的方法--"+data);
// console.log(data);
this.fromson=data
console.log(this.fromson);
}
},
components:{
com
}
})8.4.3 tihs.$ref()
父组件可以通过 ==tihs.$ref()== 获取DOM元素 和 组件 组件的数据 ，方法
html代码:
<div id="app">
<input type="button" value="获取元素" @click="myclick"/>
<h1 ref='myh1'>哈哈哈哈哈</h1>
<login ref='mylogin'></login>
</div>
<template id="tem">
<div>
<h1>你好你好</h1>
</div>
</template>vue代码:
var login={
template:'#tem',
data:function (){
return{
name:'我是子组件的数据'
}
},
methods:{
look(){
console.log('调用了子组件的方法'+this.name);
}
}
}
var vm =new Vue({
el:'#app',
data:{},
methods:{
myclick(){
//通过ref获取 dom元素
console.log(this.$refs.myh1.innerText)
//通过ref获取 组件 组件的数据 方法
console.log(this.$refs.mylogin.name);
this.$refs.mylogin.look()
}
},
components:{
'login':login
}
})