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