公共子组件(父传子)

一、代码示例

父组件(弹框为例)

  • 组件应用:
 
  • 引用组件:
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

你可能感兴趣的:(公共子组件(父传子))