1.父組件調(diào)用子組件的方法

導(dǎo)入子組件，注冊子組件,添加ref引用，通過ref去調(diào)用子組件方法

1.導(dǎo)入子組件

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.當(dāng)監(jiān)聽到父組件的某一個值變化時 通過ref去調(diào)用子組件reset()方法

watch: {
    'model.box2': {
      handler(newValue, oldValue) {
        // console.log('box3 has changed:', newValue, 'from', oldValue);
        // 在這里執(zhí)行相應(yīng)邏輯
        if (newValue == false) {
          //重置研發(fā)方案變更和產(chǎn)品詳細信息
          // console.log(this.$refs.vol-box);
          this.$refs.CY_RD_PROJECT_CHANGE_RECOND.$refs.mytable.reset()
        }
      },
      //deep: true  如果需要監(jiān)聽嵌套對象的屬性變化，可以添加 deep: true
    },
  },

1.父組件傳遞值給子組件

v-bind(簡寫是冒號)在子組件上綁定值，子組件props接收

1. 父組件中定義并傳遞參數(shù)：

在父組件模板中，你需要使用 v-bind 或其簡寫 : 來綁定需要傳遞給子組件的屬性值。

<!-- 父組件模板 -->
<template>
  <div>
    <!-- 使用v-bind:propName或簡寫:propName將父組件的數(shù)據(jù)傳遞給子組件 -->
    <child-component :my-prop="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: '這是父組件傳遞的數(shù)據(jù)'
    };
  },
  components: {
    ChildComponent
  }
};
</script>

2. 子組件中接收并使用參數(shù)：

在子組件中，你需要在 props 選項中聲明你期望接收的參數(shù)。

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

<script>
export default {
  props: {
    // 聲明接收名為'myProp'的參數(shù)
    myProp: String // 可以指定類型，也可以不指定讓Vue自動推斷
  }
};
</script>

現(xiàn)在，當(dāng)你在父組件中更改 parentData 的值時，傳遞給子組件的 my-prop 的值也會相應(yīng)更新，并在子組件中反映出來。文章來源地址http://www.zghlxwxcb.cn/news/detail-835061.html

到了這里，關(guān)于vue父組件調(diào)用子組件的方法 或傳遞值給子組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！