子组件向父组件传值 demo2

最新推荐文章于 2022-09-18 11:12:41 发布

Shift2092

最新推荐文章于 2022-09-18 11:12:41 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/Shift2092/article/details/82961689

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="blog-posts-events-demo">
    <div>
        <p>{{info2}}</p>
        <blog-post  @aa="setInfo"></blog-post>
    </div>
</div>

<template id="tep">
    <div class="blog-post">
        <button v-on:click="sendInfo">
            Enlarge text
        </button>
    </div>
</template>
<script src="js/vue.js"></script>

<script>



    Vue.component('blog-post', {
        template:"#tep",
        data:function(){
            return{
             info:"我是子组件的消息",
            }
        },
        methods:{
            sendInfo(){
                this.$emit("aa",this.info)
            }
        },
        props: ['post'],

      /*  template: `
    <div class="blog-post">
      <button v-on:click="sendInfo">
        Enlarge text
      </button>
    </div>
  `*/

    })

    new Vue({
        el: '#blog-posts-events-demo',
        data: {
            info2:"",
        },
        methods:{
            setInfo(data){
                this.info2=data;
            }

        }
    })
</script>
</body>
</html>