公共子组件（父传子）

一、代码示例

父组件（弹框为例）

• 组件应用：

• 引用组件：

import feedbackDailies from '../../../Common/detail.vue' // 文件路径自己定

• 点击事件，显示子组件

methods: {
   dailiesPicture() {
        this.$refs.feedbackDailies.open()
   },
}

• 定义子组件

components: {
      feedbackDailies
    },

子组件

  {{currentData}}

 data () {
   return: {
      dialogFormVisible: false, // 控制弹框显隐
      currentData: {}
   }
 },
 methods: {
   open() {
       this.dialogFormVisible = true
   },
 },
 watch: {
       nowData: {
            handler (val, oldVal) {
              if (val) {
                this.currentData = val
              } else {
              }
            },
            deep: true,
            immediate: true
          },
 }

二、了解

• 子组件加监听事件，防止父级数据改变，子组件没有跟着改变
  https://my.oschina.net/u/3950671/blog/3089234

• 子传父，父传子的应用实例
  https://blog.csdn.net/weixin_42277214/article/details/90478975

• 获取子组件数据（this.$refs）

// 获取值
console.log(this.$refs.addRef.ruleForm)
// 调用方法
this.$ref.addRef.submitRuleform()

https://www.cnblogs.com/luguankun/p/11700132.html

子组件调用父组件方法（this.$parent.event）

• 父组件

methods: {
      fatherMethod() {
        console.log('测试');
      }
}

• 子组件

this.$parent.fatherMethod();

https://www.cnblogs.com/jin-zhe/p/9523782.html

三、v-model传参

父组件

子组件

• vue2.0

* 值（默认值是value）
 props: {
  value: {
    type: String,
    default: ""
   }
 }
* 传参（默认方法是input）
this.$emit("input", 内容);

• vue3.0

* 值（默认值是modelValue）
 props: {
  modelValue: {
     type: String,
     default: ""
  }
}
* 传参（默认方法是update）
 this.$emit("update:modelValue", 内容);

https://www.jianshu.com/p/854fc40cf0b4