VUE父子组件通信

父亲
<template>
//chriden对应儿子的文件名字 oldInfo对应你需要传给子组件的数据 closeFun关闭方法
<chriden :oldInfo="currentQuestionInfo" :closeFun="closeQuestionInfo"></chriden>
</template>
<script>
import chriden from 'XXXX' //引用子组件路径
</script>
components: { //注册子组件
chriden
},

儿子(父传子)
<template>
div
<template>
export default {
props: {
oldInfo: {//引用父亲传过来的数据
type: Object,
default() {
return {}
}
}
},
}

子传父
子组件中:
this.showFaceDia = false
this.$emit('showFaceDia',this.showFaceDia) //执行showFaceDia函数并把要改变的值作为参数带过去

父组件:
methods:{
showFaceDia(msg){
this.showFaceDia = msg
}
}
不要忘记在DOM中引用:
<test :title="title" @showFaceDia="showFaceDia"></test>//注意showFaceDia后不能加括号

vue组件使用分三步:

  1. 引用组件 import chriden from 'XXXX'
  2. 注册组件 components = { chriden }
  3. 使用组件 <chriden ></chriden >
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容