1.父组件调用子组件的方法
导入子组件，注册子组件,添加ref引用，通过ref去调用子组件方法
1.导入子组件
import CY_RD_PROJECT_CHANGE_RECOND from "@/extension/Cy_dev_business/tabs_view/CY_RD_PROJECT_CHANGE_RECOND.vue";
2.注册子组件
components: {
"vol-box": VolBox,
// CY_RD_PROJECT: CY_RD_PROJECT,
CY_RD_PROJECT_CHANGE_RECOND: CY_RD_PROJECT_CHANGE_RECOND,
// CY_RD_PROJECT_DETAIL: CY_RD_PROJECT_DETAIL,
CY_RD_PRODUCT_DETAIL: CY_RD_PRODUCT_DETAIL,
RD_PROJECT_CHANGE_RECOND_FORM: RD_PROJECT_CHANGE_RECOND_FORM,
},
3.添加ref引用
有时会失效子组件没渲染等等问题
<CY_RD_PROJECT_CHANGE_RECOND ref="CY_RD_PROJECT_CHANGE_RECOND"/>
4.当监听到父组件的某一个值变化时 通过ref去调用子组件reset()方法
watch: {
'model.box2': {
handler(newValue, oldValue) {
// console.log('box3 has changed:', newValue, 'from', oldValue);
// 在这里执行相应逻辑
if (newValue == false) {
//重置研发方案变更和产品详细信息
// console.log(this.$refs.vol-box);
this.$refs.CY_RD_PROJECT_CHANGE_RECOND.$refs.mytable.reset()
}
},
//deep: true 如果需要监听嵌套对象的属性变化，可以添加 deep: true
},
},
1.父组件传递值给子组件
v-bind(简写是冒号)在子组件上绑定值，子组件props接收
1. 父组件中定义并传递参数：
在父组件模板中，你需要使用 v-bind 或其简写 : 来绑定需要传递给子组件的属性值。
<!-- 父组件模板 -->
<template>
<div>
<!-- 使用v-bind:propName或简写:propName将父组件的数据传递给子组件 -->
<child-component :my-prop="parentData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
parentData: '这是父组件传递的数据'
};
},
components: {
ChildComponent
}
};
</script>
2. 子组件中接收并使用参数：
在子组件中，你需要在 props 选项中声明你期望接收的参数。文章来源：https://www.toymoban.com/news/detail-835061.html
<!-- 子组件模板 -->
<template>
<div>
{{ myProp }}
</div>
</template>
<script>
export default {
props: {
// 声明接收名为'myProp'的参数
myProp: String // 可以指定类型，也可以不指定让Vue自动推断
}
};
</script>
现在，当你在父组件中更改 parentData 的值时，传递给子组件的 my-prop 的值也会相应更新，并在子组件中反映出来。文章来源地址https://www.toymoban.com/news/detail-835061.html
到了这里，关于vue父组件调用子组件的方法 或传递值给子组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
