三種方法：1.使用 Props 傳遞數(shù)據(jù) 2.使用$refs引用子組件 3.給子組件添加key值

1. 使用 Props 傳遞數(shù)據(jù)：

• 在父組件中通過(guò)修改 props 的值，傳遞新的數(shù)據(jù)給子組件，從而觸發(fā)子組件的更新。
• 在父組件中：

  <template>
    <child-component :dataProp="parentData" />
  </template>
  
  <script>
  export default {
    data() {
      return {
        parentData: 'Initial data'
      };
    },
    methods: {
      updateChildComponent() {
        this.parentData = 'New data';
      }
    }
  };
  </script>
  

• 在子組件中：

  <template>
    <div>{{ dataProp }}</div>
  </template>
  
  <script>
  export default {
    props: ['dataProp']
  };
  </script>
  

  2. 使用$refs引用子組件：

• 在父組件中使用ref為子組件創(chuàng)建引用，然后通過(guò)引用直接調(diào)用子組件的方法或訪問(wèn)其數(shù)據(jù)。
• 在父組件中：

  <template>
    <child-component ref="childRef" />
  </template>
  
  <script>
  export default {
    methods: {
      updateChildComponent() {
        // 通過(guò) $refs 調(diào)用子組件的方法或訪問(wèn)數(shù)據(jù)
        this.$refs.childRef.someMethod();
      }
    }
  };
  </script>
  

• 在子組件中：

  <template>
    <!-- 子組件內(nèi)容 -->
  </template>
  
  <script>
  export default {
    methods: {
      someMethod() {
        // 在這里可以執(zhí)行刷新子組件的操作
      }
    }
  };
  </script>
  

  3. 給子組件添加key值：

• key值變化之后，會(huì)自動(dòng)重新渲染組件，vue中的key的作用主要是為了高效的更新dom, 它也可以用于強(qiáng)制替換元素/組件而不是重復(fù)使用它，完成的觸發(fā)組件的生命周期鉤子，觸發(fā)過(guò)渡

• 父組件：

  <template>
     <el-button @click="click">刷新子組件</el-button>
    <child-component :key="datekey" />
  </template>
   
  <script>
     export default{
         data(){
            return {
                  datekey:Date.now()
              }
         },
      methods:{
          click(){
              //這里更新了datekey ，組件就會(huì)刷新
              this.datekey = Date.now()
          }
      }
  }
  </script>

總結(jié) 

到此這篇關(guān)于vue中刷新子組件重新加載子組件三種方法的文章就介紹到這了,更多相關(guān)vue刷新子組件重新加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論