標籤:style images 參數 http method component 代碼 修改 css
閑聊:
又到周五啦,明天不用上班啦哈哈哈哈哈,想想就好開心啊,嘻嘻,小穎這周三的早晨做個一個美夢,把自己愣是笑醒了,夢的大概劇情我忘記了,總之寶寶是被笑醒的,行了之後還傻笑了一段時間,真希望每天早上都能夢到這樣的夢,估計當時我家仔仔看著我傻笑內心是崩潰的,估計在想,這傻妞又做什麼夢了,太能折騰了,哭醒、笑醒、從床上掉下去 摔醒,估計也就我家鏟屎的有這技能。哈哈哈哈
1.twoWay-Prop-的參數-移除
小穎在之前用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 時:
這是怎麼實現的呢?
在父組件中:
在子組件中:
或者用 parent 來實現子組件修改父組件的值。
代碼:
父組件調用子組件的時候直接調用,傳好參數,別的不用改。
子組件中:
2.ready-替換
以前的寫法:
vue2.0的寫法:
(未完待續..............................................................................................)
從 Vue 1.x 遷移 — Vue.js