vue父组件调用子组件的方法 或传递值给子组件

---

1.父组件调用子组件的方法

导入子组件，注册子组件,添加ref引用，通过ref去调用子组件方法

1.导入子组件

import CY_RD_PROJECT_CHANGE_RECOND from "@/extension/Cy_dev_business/tabs_view/CY_RD_PROJECT_CHANGE_RECOND.vue";
1

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,
  },
1
2
3
4
5
6
7
8

3.添加ref引用

有时会失效子组件没渲染等等问题

<CY_RD_PROJECT_CHANGE_RECOND ref="CY_RD_PROJECT_CHANGE_RECOND"/>
1

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
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. 子组件中接收并使用参数：

在子组件中，你需要在 props 选项中声明你期望接收的参数。

<!-- 子组件模板 -->
<template>
  <div>
    {{ myProp }}
  </div>
</template>

<script>
export default {
  props: {
    // 声明接收名为'myProp'的参数
    myProp: String // 可以指定类型，也可以不指定让Vue自动推断
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

现在，当你在父组件中更改 parentData 的值时，传递给子组件的 my-prop 的值也会相应更新，并在子组件中反映出来。