欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue界面传值(子父组件)

程序员文章站 2022-06-10 20:27:45
...

父组件

<template>
    <div>
        <div class="rootViewstyle">
            <titleview model="1123" @touch="touchbtn"></titleview>

        </div>
    </div>
</template>

<script>
    import titleview from "./thePaperTitleView.vue"

    export default {

        components: {
            titleview

        },

        data () {
            return {}
        },

        methods: {

             touchbtn(one,two) {

                 alert(two)


            }

        },

    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

    .rootViewstyle {
        margin: 20px 20px;
        background-color: white;

    }


</style>

子组件

<template>

    <div class="titleViewstyle">
        <div id="titleshilinestyle"></div>
        <!--头视图内容-->
        <h4 align="center">
                   <span class="titlenamestyle">
                       {{model}}<strong class="titleContentstyle">数学 </strong>
                   </span>
            <span class="titlenamestyle">
                       考试时间:
                       <strong class="titleContentstyle">2016-12-08 11:01:14 </strong>
                   </span>
            <span class="titlenamestyle">
                       监考教师:
                       <strong class="titleContentstyle">暂无 </strong>
                   </span>
            <span class="titlenamestyle">
                       总题数:
                       <strong class="titleContentstyle">12题 </strong>
                   </span>
            <span class="titlenamestyle">
                       判卷老师:
                       <strong class="titleContentstyle">王木木 </strong>
                   </span>
        </h4>

        <!--虚线-->
        <div style="border-bottom: 1px dashed #ecf1f9; margin: 20px 20px"></div>

        <span class="titlenamestyle">
                       客观部分:16分
                   </span>

        <div style="border-bottom: 1px solid #ecf1f9; margin: 20px 20px"></div>

        <button @click="touchbtnone"> 确定</button>


    </div>

</template>

<script>
    export default {
        name: 'hello',
        props:['model'],
        data () {
            return {}
        },

        methods:{

            touchbtnone() {
            this.$emit('touch',"123","333")

            }

        }



    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

    .titleViewstyle {
        height: 300px;

    }

    #titleshilinestyle {
        height: 50px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ecf1f9;
    }

    .titleContentstyle {
        color: #636363;

    }

    .titlenamestyle {
        font-size: 18px;
        font-weight: normal;
        padding: 20px;
    }

</style>