vue 生命周期，v-bind 和 v-on的區別（或 : 和 @的區別），以及父傳子、子傳父的值傳遞方式

 

 Vue中的v-bind（即簡寫為 : ）和 v-on（即簡寫為@）的區別

// 完整語法
<a v-bind:href="url"></a>
// 簡寫
<a :href="url"></a>

// 完整語法
<child v-bind:data="data" />
// 簡寫
<child  :data="data" />

v-on:

// 完整語法
<div v-on:click="clickFunc">按鈕</div >
// 縮寫
<div @click="clickFunc">按鈕</div>

// 完整語法
<child v-on:returnFunc="toReturnFunc" / >
// 縮寫
<child @returnFunc="toReturnFunc" />

v-bind指令用於設置HTML屬性：v-bind:href 縮寫為 :href

v-on 指令用於綁定HTML事件 ：v-on:click 縮寫為 @click

 

 

父子組件傳值：

父傳子：

// 父組件
<div>
    <child :aaa="aa" :bbb="bb" @ccc="cc" />
</div>
data() {
    return {
        aa: 666,
        bb: "999",
    }
}
methods() {
    cc: function() {
        console.log("cc")
    }
}


// 子組件
props: {
    aaa: [String, Number],
    bbb: {
          type: String,
          default: 'qwe'
          required: true
    },
    ccc: {
          type: Function
    }
}    

 

 

子傳父：

//子組件:
<button @click="toReturn">返回</button>
methods: {
    toReturn() {
          this.$emit("childValue", "子組件向父組件傳值", true);
    }
}

//父組件:
<div v-on:childValue="getChildValue"></div>
methods: {
     getChildValue: function(data, data2) {
         console.log(data, data2);
     }
}

 

vue 生命周期：

圖來自： https://segmentfault.com/a/1190000020173042?utm_source=tag-newest

 

參考：

https://segmentfault.com/a/1190000020173042?utm_source=tag-newest

https://blog.csdn.net/weixin_39332529/article/details/106978074

https://www.cnblogs.com/apebro/p/12601111.html