最近入门学习Vue框架,备注下一些基本的要点,从父子组件之间的通信开始。
1、父组件向子组件传值
实现父组件向子组件传值需要在子组件对象属性中添加props。
.父组件代码:
<template>
<div>
<child :message="parentMsg"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'Communicate',
data () {
return {
parentMsg: 'hello, child'
}
},
components: {
child
}
}
</script>
.子组件代码
<template>
<div>
<h2>我是子组件</h2>
<p>{{message}}</p>
</div>
</template>
<script>
export default {
props: ['message'],
data () {
return {
}
}
}
</script>
2、子组件向父组件传值
目前所知晓的子组件向父组件传值有两种方法,$emit和$parent方法
(1)$emit
.父组件代码
<template>
<div>
<p>子组件通过$emit传值给父组件:{{childMsg}}</p>
<child @listen-child-props="showPropsFromChild"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'Communicate',
data () {
return {
childMsg: ''
}
},
components: {
child
},
methods: {
// 组件通过$emit传值给父组件
showPropsFromChild: function (data) {
this.childMsg = data
}
}
}
</script>
.子组件代码
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
msg: '我是子组件的值'
}
},
mounted () {
this.sendMsgToParent()
},
methods: {
sendMsgToParent: function () {
this.$emit('listen-child-props', this.msg)
}
}
}
</script>
(2)$parent
.父组件代码
<template>
<div>
<p>子组件通过$parent传值给父组件:{{childProps}}</p>
<child></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'Communicate',
data () {
return {
childProps: ''
}
},
components: {
child
}
}
</script>
.子组件代码
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
},
mounted () {
this.sendMsgToParent2()
},
methods: {
sendMsgToParent2: function () {
this.$parent.childProps = '我是子组件的值222'
}
}
}
</script>
3、父组件调用子组件的方法
父组件调用子组件的方法通常通过ref来实现
.父组件代码
<template>
<div>
<button @click="getChildMethod">父组件调用子组件的方法</button>
<child ref="childComponent"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'Communicate',
data () {
return {
}
},
components: {
child
},
methods: {
// 调用子组件的方法
getChildMethod: function () {
this.$refs.childComponent.parentGetMethod('调用子组件的方法')
}
}
}
</script>
.子组件代码
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
data () {
return {
}
}
methods: {
parentGetMethod: function (data) {
alert(data)
}
}
}
</script>
4、子组件调用父组件方法
子组件调用父组件方法主要通过$emit
.父组件代码
<template>
<div>
<child @methodToChild="sentMethodToChild"></child>
</div>
</template>
<script>
import child from './child'
export default {
name: 'Communicate',
data () {
return {
}
},
components: {
child
},
methods: {
// 该方法由子组件调用
sentMethodToChild: function () {
console.log('子组件调用父组件的方法')
}
}
}
</script>
.子组件代码
<template>
<div>
<h2>我是子组件</h2>
<button @click="getParentMethod">调用父组件的方法</button>
</div>
</template>
<script>
export default {
data () {
return {
}
}
methods: {
// 调用父组件的方法
getParentMethod: function () {
this.$emit('methodToChild')
}
}
}
</script>
参考博客:https://blog.csdn.net/suifengqianxing/article/details/73478086