Vue--- 子 --> 父组件传递参数

最新推荐文章于 2024-10-10 17:12:17 发布

郭浩326

最新推荐文章于 2024-10-10 17:12:17 发布

阅读量423

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72790160

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
        <div>{{name}}</div>
    <hr/>
        <my-comp v-on:even="jieshou"></my-comp>
</div>
</body>
<script>
        Vue.component("myComp",{
            template:"<div>我是组件 <button @click='send'>点击我</button></div>",
            data:function () {
                return {
                    zujian:{id:1,xingming:"小明"}
                }
            },
            methods:{
                send:function () {
                    this.$emit("even",this.zujian)//$emit这个方法会触发一个事件
                }
            }
        });
    var app=new Vue({
        el:"#app",
        data:{
            name:"原始数据"
        },
        methods:{
            jieshou:function (msg) {
                this.name=msg;
                console.log("父组件被触发了");
            }
        }
    })
</script>
</html>