vue界面传值（子父组件）

来源：互联网发布：ktv小姐怎么出台知乎编辑：程序博客网时间：2024/06/14 06:28

父组件

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

阅读全文

0 0