快捷導(dǎo)航

Vue中的父子組件傳值及傳方法

更新時間：2023年11月18日 09:29:14 作者：Cherry?

這篇文章主要介紹了Vue中的父子組件傳值及傳方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

傳值

父組件傳值給子組件

// 父組件
<template>
    <div>
        <!-- 父組件中引入子組件，并傳入子組件內(nèi)需要的值 -->
        <child :message="father"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
        data() {
            return {
                //定義需要傳入的值
                father: '傳給子組件的值'
            }
        },
        components: {
            child
        }
    }
</script>


// 子組件
<template>
    <div>
        <div>{{message}}</div>
    </div>
</template>
<script>
    export default {
        //在子組件中注冊props,并使用父組件中傳遞過來的數(shù)據(jù)
        props: {
            message: String
        },
    }
</script>

子組件傳值給父組件

// 父組件
<template>
    <div>
    <!--自定義事件child,事件名為parent（parent事件用于接收子組件傳遞過來的值）-->
        <parent @child="parent"></parent >
    </div>
</template>
<script>
    export default {
        data: {
            message: ''
        },
        methods: {
            parent(val) {
                this.message = val;
            }
        }
    }
</script>

// 子組件
<template>
    <div>
    <!--點擊按鈕觸發(fā)send事件，把message傳給父組件-->
        <button @click="send">Send</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '我是子組件的消息'
        }
    },
    methods: {
        sendMes() {
            this.$emit('child', this.message);
        }
    }
}
</script>

調(diào)用方法

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

// 父組件
<template>
  <div @click="handleParent">
    <children ref="mychild"></children>
  </div>
</template>

<script>
  import children from 'children.vue'
  export default {
    components: {
      children
    },
    methods:{
      handleParent() {
        this.$refs.mychild.childMethod();
      }
    }
  }
</script>

// 子組件
<template>
  <div></div>
</template>

<script>
  export default {
    methods:{
      childMethod() {
        console.log('My name is child')
      }
    }
  }
</script>

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

// 父組件
<template>
  <div>
       <child @listenChild="showFrom"></child>
       <div>{{ value }}</div>
  </div>
</template>

<script>
import child from './compontents/child.vue'
export default {
    components:{child},
    data () {
        return {
        value:''
        }
    },
    methods: {
        showFrom(data){
            this.value = data
        },
    }
}
</script>

//子組件
<template>
  <button @click="send()">
     我是子組件,點擊我向父組件傳值
  </button>
</template>

<script>
  export default {
    data(){
      return {
        message:'子組件的數(shù)據(jù)'
      }
    },
    methods:{
      send() {
        this.$emit("listenChild",this.message)
      }
    }
  }
</script>

非父子組件

廣播自定義事件

handleClick(){
    //response為要傳的值
    this.$root.$emit('change',response)
}

處理自定義事件

handleClick(){
    this.$root.$on('change',(item)=>{
        console.log(item) //item就是廣播事件的response
    })
}

有時候會發(fā)生事件只被 emit 觸發(fā)了一次，但是回調(diào)函數(shù)卻被執(zhí)行了多次的現(xiàn)象。這種現(xiàn)象往往發(fā)生在頁面跳轉(zhuǎn)退出后重新進入的時候。

產(chǎn)生原因：

this.root.Bus.root.Bus. root.Bus.on 實際是向 Bus 容器中添加一個事件監(jiān)聽器，當頁面跳轉(zhuǎn)時，原來的 vue 組件被注銷，但是原來 vue 組件向 Bus 容器中添加的事件監(jiān)聽器并不會被移除。

因此，當下次進入這個 vue 組件對應(yīng)的頁面時，執(zhí)行到 this. root.Bus.root.Bus. root.Bus.on 時，又會向 Bus 容器中添加一個重復(fù)的事件監(jiān)聽器，以此類推，導(dǎo)致 Bus 容器中有很多個一模一樣的事件監(jiān)聽器，從而導(dǎo)致事件只被觸發(fā)一次，但是回調(diào)函數(shù)被執(zhí)行多次的現(xiàn)象。

解決方案：

在 vue 組件的 beforeDetory 鉤子函數(shù)中將本 vue 組件往 Bus 容器中添加的時間監(jiān)聽器全部手動移除。

//在vue對象的methods域中定義個函數(shù)專門移除事件監(jiān)聽器
offListener() {
    this.$root.Bus.off("事件名");
    this.$root.Bus.off("事件名");
    this.$root.Bus.off("事件名");
},

//在beforeDestroy鉤子中調(diào)用此函數(shù)
beforeDestroy() {
    this.offListener();
},