组件: 组件是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化区别:
注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!
// 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('register', {
template: '<h1>注册</h1>'
});
<!-- 在 被控制的 #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('点击了登录按钮');
}
}
});
data
属性中的值,需要使用this
来访问;<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.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属性定义子组件
}
});
目标:主要练习父子组件之间传值
<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函数会把整个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 指定的那个容器
}
});