關(guān)于vue中v-on和v-bind適用場(chǎng)景的疑問

我們知道v-on用于綁定事件，v-bind用于綁定數(shù)據(jù)或?qū)傩裕?br>但今天用iview時(shí)發(fā)現(xiàn)原來v-bind也可以綁定事件，
比如

<Tree :custom-click="treeClick"></Tree>
export default{
    data(){
        return {}
    },
    methods:{
        treeClick(){
            // do something...
        }
    }
}

<template>
    <div @click="iClick">
        // some code...
    </div
</template>

export default{
    name:'Tree',
    data(){
        return {}
    },
    props:['custom-click'],
    methods:{
        iClick(){
            this['custom-click']();
        }
    }
}

感覺這樣寫用v-bind綁定事件比v-on更簡(jiǎn)單方便吧，因?yàn)関-on還得$on $emit，還是我理解錯(cuò)了？

回答

編輯回答

懷中人

$emit是子向父?jìng)鬟f事件，$on一般用于eventBus

2018年5月29日 04:23

編輯回答

陌上花

你的理解是不對(duì)的。
v-on和v-bind的區(qū)別是，前者為addEventListener，后者為var newVal = oldVal。前者叫做事件綁定，后者是值的傳遞。
所以，:custom-click="treeClick"只是將父組件中的方法treeClick傳遞給了子組件的custom-click，這里面沒有事件綁定的關(guān)系。
但是這兩種方式還是有相似的地方的，比如都是通過某種方式去執(zhí)行父組件的方法。但是區(qū)別在于：

通過事件綁定的方式，父子組件是隔離的，子組件觸發(fā)，父組件怎么使用和用不用是父組件的事情。
通過props傳入的方式，則是將這個(gè)方法作為了子組件功能流程內(nèi)的一部分。

如：

// 子組件
props: ['dataFormat'],
methods: {
    dataVal () {
        return this.dataFromat(this.val)
    }
}
// 將父組件自定義的數(shù)據(jù)格式化方法放進(jìn)自己的流程中

如果使用自定義事件的方式，則是this.$emit('valChange', this.val)，怎么處理，是用dataFormat1還是dataFormatX是外部父組件的事情，耦合性更低。

2017年8月24日 03:49

編輯回答

淺淺

你的Tree是組件，放置這個(gè)組件的頁(yè)面是相對(duì)于Tree內(nèi)部的<div>的父級(jí)，所以你Tree組件里面寫props綁定父級(jí)的事件所以就能執(zhí)行了

2018年2月15日 19:17

編輯回答

心沉

你看沒看見使用 v-on 和 v-bind 的2個(gè)標(biāo)簽一個(gè)是 <Tree></Tree> 一個(gè)是 <div></div> ,
<Tree> 是 iview 的內(nèi)置組件所以你要遵循 iview 的 Api 去綁定事件, <div>是 html 標(biāo)簽,
你把2個(gè)都改成 <div></div>標(biāo)簽, 一個(gè)用 v-bind 一個(gè)用 v-on 你才能得到答案!

2018年5月22日 16:58

編輯回答

不歸路

這個(gè)問題我也在思考。
習(xí)慣了react，屬性和方法都是props往子組件傳。vue感覺也可以用v-bind這么干。
只有在html標(biāo)簽才用v-on:click之類的事件處理。
一個(gè)是當(dāng)作props往子組件傳遞，作為回調(diào)函數(shù)在子組件里面調(diào)用。
一種是用v-on的方法，通過發(fā)布訂閱模式，在子組件方法里面觸發(fā)消息。
我感覺都能干，求貴人指點(diǎn)。

2017年9月22日 12:05

編輯回答