從 Vue 1.x 遷移—Vue.js

閑聊：

又到周五啦，明天不用上班啦哈哈哈哈哈，想想就好開心啊，嘻嘻，小穎這周三的早晨做個一個美夢，把自己愣是笑醒了，夢的大概劇情我忘記了，總之寶寶是被笑醒的，醒了之後還傻笑了一段時間，真希望每天早上都能夢到這樣的夢，估計當時我家仔仔看著我傻笑內心是崩潰的，估計在想，這傻妞又做什麼夢了，太能折騰了，哭醒、笑醒、從床上掉下去 摔醒，估計也就我家鏟屎的有這技能。哈哈哈哈

小穎在之前用vue1.的時候子組件可以通過Prop中twoWay的參數，直接修改父組件的值，但是現在不行了。

光看，可能大家不太理解，下面小穎就做個demo，幫大家更好的理解。嘻嘻，

父組件：

<template>
<div class="tab-content">
<children :peopledata=""哈嘍你好！"" :childrenflag="childrenFlag"
@update:childrenflag="val => childrenFlag = val"></children>
</div>
</template>
<script>
import children from "./children.vue"
export default {
components: {
children
},
data {
return {
childrenFlag:false
};
},
methods: {}
};
</script>

<style lang="css">
</style>

子組件：

<template lang="html">
<div class="children-content" v-if="childrenflag">{{peopledata}}
<div class="fruit-content">
<ul v-for="fruit in fruitData">
<li>{{fruit.name}}</li>
</ul>
</div>
</div>
</template>

<script>
export default {
components: {},
props: {
peopledata: {
type: String
},
childrenflag: {
type: Boolean
}
},
mounted: function {
this.$emit("update:childrenflag", !this.childrenflag);
},
data {
return {
fruitData: [{
name: "香蕉"
}, {
name: "蘋果"
}, {
name: "聖女果"
}]
}
}
}
</script>

<style lang="css">
</style>

當父組件的值 childrenFlag:false 時： 當父組件的值 childrenFlag:true 時：

這是怎麼實現的呢？

在父組件中：

在子組件中：

代碼：

父組件調用子組件的時候直接調用，傳好參數，別的不用改。

子組件中：

以前的寫法：

vue2.0的寫法：

(未完待續..............................................................................................)

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！