vue界面传值（子父组件）

最新推荐文章于 2024-08-02 09:29:40 发布

Luyc_Han

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量1.2k

点赞数 1

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/wmmhwj/article/details/77992055

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

父组件

<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>