vue界面传值(子父组件)

父组件

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




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




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

你可能感兴趣的:(web)