20-父组件向子组件传递事件并通过子组件向父组件传递数据 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        在使用组件时向组件传递事件  直接在对应组件标签上定义传递事件即可  @key=value  @传递事件名=“父组件中传递事件名”
    -->
    <div id="app">
        <h1>{{msg}} ----- {{count}}</h1>
        <login name="小陈" v-bind:msg="msg" @aa="testParent"></login>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const login = {
        template:`<div><h3>用户登录----{{name}}---{{msg}}</h3><button v-on:click="testChild">点我给父组件传递数据</button></div>`,
        data(){
            return{
                count:21
            }
        },
        props:['name', 'msg'],
        methods: {
            testChild(){
                alert("我是子组件中定义的事件");
                //调用父组件中testParent事件
                this.$emit('aa', this.count);//这个方法用来调用父组件传递过来的事件  参数1：调用事件名
            }
        }
    }

    const app = new Vue({
        el: "#app",
        data:{
            msg:"组件之间的事件传递",
            count:0
        },
        methods:{
            testParent(count){
                alert("我是父组件中的事件");
                this.count = count;
            }
        },
        components:{
            login,
        }
    });
</script>
posted @ 2021-09-26 17:49  不是孩子了  阅读(87)  评论(0)    收藏  举报