vue学习007

最新推荐文章于 2023-09-15 23:26:00 发布

101之歌

最新推荐文章于 2023-09-15 23:26:00 发布

阅读量119

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qxf1374268/article/details/90048105

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

父子组件之间传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件之间传值</title>
    <script src="vue.js"></script>
    <script src="vue-route.js"></script>
</head>
<body>
<div id="app">
    <com1 v-bind:msg="msg" v-on:func="getMsg"></com1>
</div>

<template id="tmp1">
    <div>
        <h1>{{msg}}</h1>
        <input type="button" value="send" v-on:click="sendMsg"/>
    </div>
</template>

</body>

<script>
    let com1 = {
        template:'#tmp1',
        props:[
            'msg'
        ],
        data(){
            return{
                sonMsg:'give me five'
            }
        },
        methods:{
            sendMsg(){
                this.$emit('func',this.sonMsg);
                alert(this.sonMsg)
            }
        }
    };

    let app = new Vue({
        el:'#app',
        data:{
            msg:"give you some money",
            sonMsg:""
        },
        methods:{
            getMsg(data){
              this.sonMsg = data
          }
        },
        components:{
            com1
        }
    })
</script>
</html>