美文网首页
VUE组件数据父传子,子传父

VUE组件数据父传子,子传父

作者: 前端金城武 | 来源:发表于2021-01-04 14:25 被阅读0次

父组件

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">子传父的值是:{{dd}}</text>
        </view>
                <!-- 获取子组件数据 给子组件传值 -->
        <child @fromChild="getdata" :cc="datachild"></child>
    </view>
</template>

<script>
    import child from './childComps/child.vue'
    export default {
        data() {
            return {
                dd:'',
                datachild:'22'
            }
        },
        methods: {
            getdata(e){
                this.dd = e;
            }
        },
        components:{
            child
        }
    }
</script>

子组件

<template>
    <view class="child">
        子组件范围<br>
        <text>父传子的值是{{cc}}</text>
        <button @click="toParent">点击传到父级</button>
    </view>
</template>

<script>
    export default{
        name: 'child',
        props:{
            cc: String
        },
        methods:{
            toParent(){
                this.$emit('fromChild','11')
            }
        }
    }
</script>

相关文章

网友评论

      本文标题:VUE组件数据父传子,子传父

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