美文网首页
vue2.0父子组件传值

vue2.0父子组件传值

作者: daf89232a846 | 来源:发表于2017-04-21 09:06 被阅读0次

    官网学习
    http://cn.vuejs.org/v2/guide/components.html 组件:prop & 自定义事件(emit)
    注:若是想是动态或两个不是父子关系的组件传值,请查看上面的网址。
    ===父向子传
    案例说明:父亲把钱给儿子
    /父组件中/
    // 父组件中使用子组件,并保存获取传过来的值
    <child-module give-something="money"></child-module>
    export default {
    name:'parent',
    data () {
    money: 20000
    }
    }
    /子组件中/
    <template>
    <div>父亲给我的钱{{giveSomething}}</div>
    </template>
    export default {
    name:'child',
    props: ['giveSomething']
    }
    注:在vue中定义的“give-something”,可自动转为小驼峰“giveSomething”
    ===子向父传
    案例说明:儿子告诉父亲自己的爱好
    /父组件中/
    // 父组件中使用子组件,并保存获取传过来的值
    <child-module v-on:getChildValue="listenToMySon"></child-module>
    export default {
    name:'parent',
    data () {
    value: ''
    },
    methods:{
    listenToMySon: function (getValue) {
    // 把子组件中的值赋值给value
    this.value = getValue
    }
    }
    }
    /子组件中/
    <template>

    <div @click="sendValue">告诉父亲我的爱好</div>
    </template>
    export default {
    name:'child',
    data () {
    hobby: '唱歌'
    },
    methods:{
    sendValue: function () {
    // 把爱好变量传给父亲
    this.$emit('getChildValue', this.hobby)
    }
    }
    }

    相关文章

      网友评论

          本文标题:vue2.0父子组件传值

          本文链接:https://www.haomeiwen.com/subject/mfolottx.html