28-2 子组件传递父组件 数据 — $emit 的使用

父传子 我们学了，现在我们学 子传父

 

还记得那个图吗 其实就是 用 $emit 传递。换句话说就是传递自定义事件：

直接上代码 Vue其实很繁琐，框架这种东西就得照猫画虎，说道理是没用的：

 

这里我们还是一样用VUE实例来当父组件 因为代码很多  为了简便吧  其实都一样的：

 

 

下面这个代码是一个很简单的一个显示数据的代码：【我们根据这个代码来添加 子组件数据 传给 父组件】

<!--新建模板-->
<template id="cpm">
    <div>
        <button v-for="item in json">{{item.name}}</button>
    </div>
</template>


<div id="app">
<child></child>
</div>


<script src="js/vue.js"></script>

<script>
    const app = new Vue({
        el:"#app",
        components:{
            child:{
                template:'#cpm',
                data(){
                    return {
                        json:[
                            {id:101,name:"金典电影"},
                            {id:102,name:"青春电影"},
                            {id:103,name:"文艺电影"},
                            {id:104,name:"励志电影"},
                            {id:105,name:"爱情电影"},
                        ]
                    }
                }
            }
        }
    })
</script>

 

案例： 点击某某电影 然后父组件接受到 显示出：【主义看改变的地方即可】

<!--新建模板-->
<template id="cpm">
    <div>
        <button v-for="item in json"  @click="method(item.id,item.name)"   >{{item.name}}</button>
    </div>
</template>


<div id="app">
<child @event="appevent"></child>   <!--用appevent不用加参数 参数会自动传入(按顺序传) 切记即可！-->
    <p>{{show()}}</p>
</div>


<script src="js/vue.js"></script>

<script>
    const app = new Vue({
        el:"#app",
        components:{
            child:{
                template:'#cpm',
                data(){
                    return {
                        json:[
                            {id:101,name:"金典电影"},
                            {id:102,name:"青春电影"},
                            {id:103,name:"文艺电影"},
                            {id:104,name:"励志电影"},
                            {id:105,name:"爱情电影"},
                        ]
                    }
                },
                methods:{
                    method(id,name){
                        this.$emit('event',id,name);
                    }
                }

            }
        },
        data:{
          id:"",
          name:""
        },
        methods:{
            appevent(id,name){
              this.id = id;
              this.name = name;
            },
            show(){
                return "您点击了:  Id 为" + this.id + "Name为：" + this.name;
            }
        }
    })
</script>

 

其实我也不知道怎么讲  反正 他数据传来传去的 贼烦 我学的时候我也奔溃....

   this.$emit('event',id,name);

主要还是这一句  event是一个事件，后面接着的是参数，

调用的时候 ：

<child @event="appevent"></child>   <!--用appevent不用加参数 参数会自动传入(按顺序传) 切记即可！-->

appevent 是 父组件的 method ，参数会制动注入到appevent的 千万别去这样： appevent(id,name) 不然报错，

 

这就是细节。

 

 

2021年10月29日 20:39:13 补充：

 

永远记住   ：     子组件传递出来的事件，已经是触发了的！！   而且这个事件 只能在 “父组件” 中 定义才能使用！  【这里分清楚 触发 和 使用 两回事】【先触发 后使用】