Vue 子元件呼叫父元件方法總結

Zero遊戲人生丶發表於2018-12-14
Vue元件

hello world

好久沒有寫部落格了，今天看到掘金有人寫總結下Vue元件方法標題，回想了一下總結的知識，感覺自己有些遺忘，就寫下此篇複習下，結果發現之前總結方法都能寫出來。這些比較以前的了，最近又好久沒學習。如果還有什麼其他方法，求賜教。程式碼是純Markdown寫的，可能程式碼會寫錯。如果看到的也麻煩提個醒

常用的方法總結下

  • $emit
  • $parent
  • prop
  • vuex（vuex程式碼比較麻煩，不寫了，說下步驟吧 dispatch：actions=>commit:mutations）

$parent方法

父元件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father元件');
      }
    }
  }
</script>
複製程式碼

子元件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$parent.fatherMethod()
      }
    }
  }
</script>
複製程式碼

$emit方法

父元件

<template>
  <div>
    <child @callFather="activeSon"></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father元件');
      },
      activeSon(){
        this.fatherMethod()
      }
    }
  }
</script>
複製程式碼

子元件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$emit("callFather")
      }
    }
  }
</script>
複製程式碼

$prop方法

父元件

<template>
  <div>
    <child :activeSon="fatherMethod()"></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father元件');
      }
    }
  }
</script>
複製程式碼

子元件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
  props:{
    activeSon:  {
        type: Function,
        default: null
      }
  },
    methods: {
      activeBtn() {
        this.activeSon()
      }
    }
  }
</script>
複製程式碼

相關文章