什么是组件
vue可以进行组件化开发, 组件是Vue的基本构造单元,
案例:
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
data () {
return {
count: 0
}
},
template: '<button v-on:click="count++">被单击{{count}}次</button>'
})
var vm = new Vue({ el: '#app' })
</script>
局部注册
<div id="app">
<my-component></my-component>
</div>
<script>
var com1 = {
template: '<p>我是vm实例中的局部组件</p>'
}
var vm = new Vue({
el: '#app',
// 注册局部组件
components: { myComponent: com1 }
})
</script>
可通过components注册组件
template 模板
<div id="app">
<p>{{title}}</p>
<my-component></my-component>
</div>
<template id="tmp1">
<p>{{title}}</p>
</template>
<script>
Vue.component('my-component', {
template: '#tmp1',
data () {
return {
title: '我是组件内的title',
}
}
})
var vm = new Vue({
el: '#app',
data: {
title: '我是vm实例的title'
}
})
</script>
上面的template模板是字符串保存的,不适合复杂一点的, 这里使用HTML结构。
组件之间的数据传递
1.props传值
<div id="app">
<my-parent name="title"></my-parent>
</div>
<script>
Vue.component('my-parent',{
props: ['name'],
template: '<div>我是父组件{{name}}</div>'
})
var vm = new Vue({
el: '#app'
})
</script>
- props接收name数据,name在父组件中定义,同时name可以与data绑定,当data数据发生改变时,组件中的name值也发生改变
- props是以从上到下的单向数据流传递,父级组件的props更新会改变子组件, 但是子主键不会改变父组件
1.$emit传值
<div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<button @click="click">Send</button>
<input type="text" v-model="message">
</div>
</template>
<script>
Vue.component('parent', {
template: '<div><child @childFn="transContent"></child>' +
'子组件传来的值 : {{message}}</div>',
data () {
return {
message: ''
}
},
methods: {
transContent (payload) {
this.message = payload
}
}
})
// child组件
Vue.component('child', {
template: '#child',
data () {
return {
message: '子组件的消息'
}
},
methods: {
click () {
this.$emit('childFn', this.message);
}
}
})
var vm = new Vue({ el: '#app' })
</script>
这个用于子组件向父组件传值
组件切换
Vue中的界面结构是由组件构成的,不同组件可以表示不同页面
<body>
<div id="app">
<a href="#" @click.prevent="flag ? flag : flag = !flag">登录</a>
<a href="#" @click.prevent="flag ? flag = !flag : flag">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login', {
template: '<div>登录页面</div>'
})
Vue.component('register', {
template: '<div>注册页面</div>'
})
var vm = new Vue({
el: '#app',
data: { flag: true }
})
</script>
</body>
Vue的生命周期
钩子 | 说明 |
---|---|
beforeCreate | 创建实例对象之前执行 |
created | 创建对象之后执行 |
beforeM ount | 页面挂载成功之前执行 |
m ounted | 页面挂载成功之后执行 |
beforeUpdate | 组件更新之前执行 |
updated | 组件更新之后执行 |
beforeDestroy | 实例销毁之前执行 |
destroyed | 实例销毁之后执行 |