Vue组件化的特性让页面开发变的很简单,往往开发者一直在处理父子组件之间的业务逻辑关系,这篇博文根据一个小Demo,了解父子组件的用法!
文章目录
- 1.组件的概念
- 起步
- 2.父组件引用子组件
- 3.父组件与子组件实现数据双向绑定
- 4.父组件调用子组件的方法
- 5.子组件调用父组件的方法
1.组件的概念
组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等
起步
父组件:
<template>
<div class="parent">
<p>这里是父组件</p>
</div>
</template>
<script>
export default {
name: "parent",
data() {
return {}
}
}
</script>
<style scoped>
.parent{
width: 80%;
margin: auto;
}
</style>
配置父组件的路由,用于页面展示:
import Vue from 'vue'
import Router from 'vue-router'
import parent from "../components/parent/parent";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'parent',
component: parent
},
]
})
启动项目查看效果:
子组件:
<template>
<div>
<p>这里是子组件</p>
</div>
</template>
<script>
export default {
name: "child",
data() {
return {}
}
}
</script>
<style scoped>
</style>
由于子组件在父组件中使用,所以不需要配置路由
2.父组件引用子组件
引用子组件:
<template>
<div class="parent">
<p>这里是父组件</p>
<child></child>
</div>
</template>
<script>
import child from "../child/child";
export default {
name: "parent",
components:{child},
data() {
return {}
}
}
</script>
效果:
3.父组件与子组件实现数据双向绑定
双向绑定的意思就是,数据在父组件里面修改子组件也相应的修改,子组件修改父组件也是
父组件加入如下代码,通过v-model(简写是 :)绑定childMsg:
<template>
<div class="parent">
<p>这里是父组件</p>
<p>{{parentMsg}}</p>
<button @click="add">加一</button>
<child :childMsg="parentMsg"></child>
</div>
</template>
<script>
import child from "../child/child";
export default {
name: "parent",
components: {child},
data() {
return {
parentMsg: 1,
}
},
methods: {
add() {
this.parentMsg++
}
}
}
</script>
子组件修改代码,增加props属性接收父组件传递参数:
<template>
<div>
<p>这里是子组件</p>
<p>{{childMsg}}</p>
</div>
</template>
<script>
export default {
name: "child",
props:['childMsg'],
data() {
return {
}
}
}
</script>
效果:
4.父组件调用子组件的方法
在子组件里面加上一个清零的方法
<template>
<div>
<p>这里是子组件</p>
<p>{{childMsg}}</p>
<button @click="clear"> clear</button>
</div>
</template>
<script>
export default {
name: "child",
props: ['childMsg'],
data() {
return {}
},
methods: {
clear() {
this.childMsg = 0
}
}
}
</script>
父组件通过 this.$refs.xx.xx();方法调用,但是必须要定义子组件的 ref 属性:
<template>
<div class="parent">
<p>这里是父组件</p>
<p>{{parentMsg}}</p>
<button @click="add">加一</button>
<button @click="dy">调用子组件方法</button>
<child :childMsg="parentMsg" ref="child"></child>
</div>
</template>
<script>
import child from "../child/child";
export default {
name: "parent",
components: {child},
data() {
return {
parentMsg: 1,
}
},
methods: {
add() {
this.parentMsg++
},
dy(){
this.$refs.child.clear()
}
}
}
</script>
效果:
5.子组件调用父组件的方法
子组件通过 this.$emit() 函数调用父组件的 add 方法,让 parentMsg 加1,子组件增加代码:
<template>
<div>
<p>这里是子组件</p>
<p>{{childMsg}}</p>
<button @click="clear"> clear</button>
<button @click="dy"> 调用父组件方法</button>
</div>
</template>
<script>
export default {
name: "child",
props: ['childMsg'],
data() {
return {}
},
methods: {
clear() {
this.childMsg = 0
},
dy(){
this.$emit('Padd')
}
}
}
</script>
父组件新增代码:
<template>
<div class="parent">
<p>这里是父组件</p>
<p>{{parentMsg}}</p>
<button @click="add">加一</button>
<button @click="dy">调用子组件方法</button>
<child :childMsg="parentMsg" ref="child" v-on:Padd="add"></child>
</div>
</template>
<script>
import child from "../child/child";
export default {
name: "parent",
components: {child},
data() {
return {
parentMsg: 1,
}
},
methods: {
add() {
this.parentMsg++
},
dy(){
this.$refs.child.clear()
}
}
}
</script>
效果: