组件
组件： 组件是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化区别：
- 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
- 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
全局组件定义的三种方式
注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
- 使用 Vue.extend 配合 Vue.component：
// 1.使用 Vue.extend 来创建全局的Vue组件
var login = Vue.extend({
template: '<h1>登录</h1>'
});
// 2.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component('login', login);
<!-- 3.使用组件直接把组件的名称，以 HTML 标签的形式，引入到页面即可 -->
<login></login>
注意：若组件名称中有大写，如myLogin，则标签写为<my-login></my-login>
- 直接使用 Vue.component ：
Vue.component('register', {
template: '<h1>注册</h1>'
});
- 将模板字符串，定义到template标签中：
<!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构 -->
<template id="tmpl">
<div>
<h1>这是通过 template 元素定义的组件</h1>
<h4>好用,不错!</h4>
</div>
</template>
同时，需要使用 Vue.component 来定义组件：
Vue.component('account', {
template: '#tmpl'
});
局部子组件
- 组件实例定义方式,使用
components属性定义：
var vm2 = new Vue({
el: '#app2',
components: { // 定义实例内部私有组件的
login: {
template: '#tmpl2'
}
},
})
- 引用组件：
<template id="tmpl2">
<h1>这是私有的 login 组件</h1>
</template>
<div id="app2">
<login></login>
</div>
组件中展示数据和响应事件
- 在组件中，
data需要被定义为一个方法，例如：
Vue.component('account', {
template: '#tmpl',
data() {
return {
msg: '大家好！'
}
},
methods:{
login(){
alert('点击了登录按钮');
}
}
});
- 在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的
data属性中的值，需要使用this来访问；
【重点】为什么组件的data属性必须是一个方法并返回一个对象
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
var dataObj = { count: 0 }
// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
// return dataObj 使用外部对象时，每次修改的都是这个外部对象，导致三个组件同时都加一
return { count: 0 } // 这样返回，每次调用function都会创建一个对象，三个组件互不干扰
},
methods: {
increment() {
this.count++
}
}
})
切换组件
使用flag标识符结合v-if和v-else
只能实现两个组件之间的切换
- 页面结构：
<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>
- Vue实例定义：
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
使用:is属性来切换不同的子组件,并添加切换动画
- 组件实例定义方式：
// 组件名称是 字符串
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
},
methods: {}
});
- 使用
component标签，来引用组件，并通过:is属性来指定要加载的组件：
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- transition负责动画，component负责引用组件 -->
<transition mode="out-in"><!-- 通过 mode 属性,设置组件切换时的模式 -->
<component :is="comName"></component>
</transition>
</div>
- 添加切换样式：
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
组件传值
父组件向子组件传值
- 组件实例定义方式，注意：一定要使用
props属性来定义父组件传递过来的数据
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的消息'
},
components: {
son: {
template: '<h1>这是子组件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
- 使用
v-bind或简化指令，将数据传递到子组件中：
<div id="app">
<son :finfo="msg"></son>
</div>
子组件向父组件传值
原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称
<son @func="getMsg"></son>
子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用
<div id="app">
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="点击触发父组件传递过来的 func 方法" @click="myclick">
</div>
</template>
// 定义组件模板对象
var comObject= {
template: '#tmpl', // 通过指定Id,加载这个指定Id的 template 元素中的内容，当作组件的HTML结构
data() {
return {
sonmsg: { name: '小头儿子', age: 6 }
}
},
methods: {
myclick() {
// 通过@func="show" 拿到父组件的show方法并赋值给func
// this.$emit('func', 123, 456) 可以传递多个数据
this.$emit('func', this.sonmsg)
}
}
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
datamsgFormSon: null
},
methods: {
show(data) { // 子组件调用show方法，将值传递给父组件并保存在父组件中
this.datamsgFormSon = data
}
},
components: {
'com2':comObject // 使用components属性定义子组件
}
});
demo:评论列表
目标：主要练习父子组件之间传值
<div id="app">
<com2 @func="fcommit"></com2>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人： {{ item.user }}</span>
{{ item.content }}
</li>
</ul>
</div>
<template id="tmpl">
<div>
评论人：<input type="text" v-model="username">
内容：<input type="text" v-model="content">
<input type="button" @click="commit" value="提交">
</div>
</template>
var com2 = {
template: '#tmpl',
data() {
return {
username:'',
content:''
}
},
methods: {
commit() {
this.$emit('func', {id:Date.now(),user:this.username,content:this.content})
this.username=''
this.content=''
}
}
}
var vm = new Vue({
el:'#app',
data:{
list: [
{ id: Date.now(), user: '李白', content: '天生我材必有用' },
{ id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
{ id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
]
},
methods:{
fcommit(data){
this.list.push(data)
}
},
components: {
com2 // 使用components属性定义子组件
}
})
使用 this.$refs 来获取DOM元素和组件
可以通过该方法获取子组件的值和方法
<div id="app">
<div>
<input type="button" value="获取元素内容" @click="getElement" />
<!-- 使用 ref 获取元素 -->
<h1 ref="myh1">这是一个大大的H1</h1>
<hr>
<!-- 使用 ref 获取子组件 -->
<my-com ref="mycom"></my-com>
</div>
</div>
<script>
Vue.component('my-com', {
template: '<h5>这是一个子组件</h5>',
data() {
return {
name: '子组件'
}
}
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通过 this.$refs 来获取元素内容
console.log(this.$refs.myh1.innerText);
// 通过 this.$refs 来获取组件的data
console.log(this.$refs.mycom.name);
}
}
});
</script>
在普通页面中使用render函数渲染组件
render函数会把整个el指定的容器替换为指定的组件模板，容器内任何东西都会被覆盖
<div id="app">
<p>444444</p>
</div>
var login = {
template: '<h1>这是登录组件</h1>'
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function (createElements) { // createElements 是一个方法，调用它能够把指定的组件模板，渲染为 html 结构
return createElements(login)
// 注意：这里 return 的结果，会替换页面中 el 指定的那个容器
}
});