一、代码示例
父组件(弹框为例)
- 组件应用:
- 引用组件:
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