zoukankan      html  css  js  c++  java
  • vue2.0 组件之间的数据传递

    组件间的数据传递
    // 父组件
    <template>
    <div class="order">
    <dialog-addpro v-on:closedialog="close" :proinfo="proinfo"></dialog-addpro>
    </div>
    </template>
    <script>
    import daddpro from '../../daddpro'

    export default {
    data: function () {
    return {
    proinfo: {
    name: '222',
    id: 12
    }
    }
    },
    methods: {
    close (info) {
    // 方法体
    }
    },
    components: {
    'dialog-addpro': daddpro
    }
    }
    </script>

    // 子组件
    <template>
    <div class="">
    <span>{{ proinfo.name }}</span>
    <span>{{ proinfo.id }}</span>
    </div>
    </template>
    <script>
    import crumbs from '../../layout/crumbs'

    export default {
    data: function () {
    return {
    }
    },
    props: ['proinfo'],
    methods: {
    cancel () {
    this.$emit('closedialog', this.proinfo)
    // 参数 父组件方法名 , 参数
    }
    }
    }
    </script>
    父组件向子组件传递值
    传递数据给组件:proinfo="proinfo" proinfo为父组件里定义的值,组件取值方式 props: ['proinfo', 'propsdata_show'],可以传多个对象

    自组件向父组件传值
    this.$emit('方法名' , 参数),触发当前实例上的事件

  • 相关阅读:
    杂记-2
    2019CSP-S游记
    csp2020
    特征根法小记
    csp模拟赛低级错误及反思
    备份
    黑科技——树剖两次dfs转一次dfs!
    输出天干地支
    蓝桥0531-输出Y
    蓝桥0615-判断四位数字前后两组是否相等
  • 原文地址:https://www.cnblogs.com/manman04/p/6218934.html
Copyright © 2011-2022 走看看