从 Vue 1.x 迁移 — Vue.js

时间：2017-08-04 16:46:09 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：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>