从 Vue 1.x 迁移 — Vue.js

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

原文地址:http://www.cnblogs.com/yingzi1028/p/7285515.html


最新回复(0)
/jishuOBf1sFtgUqqrYmrF2VjP59fLsOzhlnQgASSoKC7vYM4_3D4719154
8 简首页