组件化和模块的区别
- 组件: 就是为了拆分vue实例的代码量,以不同的组件,来划分不同的功能模块
- 组件和模块化的不同:
- 模块是从代码逻辑划分的,方便代码非常开发,保证每个功能模块职能单一
- 组件是从 UI 界面划分的,方便 UI 组件的重用
创建组件的方式
一、
- Vue.extend 来创建全局的 Vue 组件
var com1 = Vue.extend({
template:'<h3>Vue.extend 创建的组件</h3>'
})
- Vue.component(‘组件名称’,创建出来的组件模板对象)
Vue.component('myCom1',com1)
- HTML中使用:
<my-com1></my-com1>
//创建的时候名称如果用驼峰,使用的时候需要用 - - 简化版
Vue.component('mycom1',Vue.extend({
template:'<h3>Vue.extend 创建的组件</h3>'
}))
二、
- Vue.component(‘mycom2’,{
template:‘Vue.component 之间创建的组件
’
}) - HTML中使用:
<my-com2></my-com2>
- 注意 :不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
三、
html:
<div id="app">
<mycom3></mycom3>
</div>
<template id="tmp1">
<div>
<h3>此种用法有高亮和提示</h3>
</div>
</template>
js:
Vue.component('mycom3',{
template:'#tmp1'
})
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
使用 components 定义私有组件
var vm = new Vue({
el:’#app’,
data:{},
methods:{},
components:{ //定义实例内部私有组件
login:{
template:‘
这是私有login组件
’}
}
})
组件中的 data 和 methods
Vue.compontent({
template:'<h1>这是全局组件---{{ msg }}</h1>'
data:function(){ //组件 data 需要是函数
return { //必须返回一个对象
msg:'这是组件定义的data数据'
}
},
methods:{
}
})
组件切换
- v-if 和 v-else
<a href="" @click.prevent=“flag=true”>登录
<a href="" @click.prevent=“flag=false”>/a>
-
Vue 提供的 component
<a href="" @click.prevent=“flag=‘login’”>登录
<a href="" @click.prevent=“flag=‘register’”>/a>
- // component 是一个占位符, :is 属性可以用来指定要展示的组件名称
组件过渡
//mode属性,设置切换方式,先出后进
父子组件传值
-
父组件,可以在引用子组件的时候,通过属性绑定 v-bind 的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部
<div id="app"> <com1 v-bind:parentmsg="msg"></com1> </div>
var vm = Vue({ el:'#app', data:{ msg:'需要传递的值' }, components:{ data:{} //子组件中的 data 数据,是子组件自己私有的;数据可读可写 com1:{ template:'<h1>这是子组件</h1>', props:['parentmsg'], //把父组件传递过来的 parentmsg 属性,在 props 数组中定义一下,才能使用 [组件中的所有 props 中的数据,都是通过父组件传递给子组件的];数据只读的 } } })
父组件向子组件传递方法
- 使用事件绑定机制: v-on
<div id="app">
<com1 @func:="show"></com1>
</div>
这是子组件
var com2 = {
template:'#tmp1',
data(){
return { }
}
methods:{
myclick(){
//第一个参数为父组件方法名,其它为子组件向父组件传的 数据
this.#emit('func',123,456) //emit 代表触发、调用的意思
}
}
}
var vm = Vue({
el:'app',
data:{},
methods:{
show(data,data2){
console.log('调用父组件身上的 show 方法');
}
}
})
使用 ref 获取 DOM 元素 和 组件 引用
- DOM
<h1 ref='myh1'>11111</h1>
<h2 ref='myh2'>22222</h2>
console.log(this.$refs.myh1.innerText);
-
组件
`
this.$refs.mylogin.msg //vm 中获取组件的数据 this.$refs.mylogin.show() //vm 中调用组件的方法