子级向父级传递

最新推荐文章于 2022-06-15 17:33:28 发布

Eli-sun

最新推荐文章于 2022-06-15 17:33:28 发布

阅读量340

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106819348

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

子级向父级传递

自定义事件的流程：
在子组件中，通过$emit()来触发事件
在父组件中，通过v-on：/@来监听子组件事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
<cpn v-on:item-click="cpnClick"></cpn>
</div>

<!--2.子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../../vue.min.js"></script>
<script>
  //1.子组件
  const cpn={
    template:'#cpn',
    data(){
      return{
        categories:[
          {id:'aaa',name:'热门推荐'},
          {id:'bbb',name:'手机数码'},
          {id:'ccc',name:'家用家电'},
          {id:'ddd',name:'电脑办公'}
        ]
      }
  },
    methods:{
      btnClick(item) {
        // console.log(item)
        //发射事件：自定义事件
        this.$emit('item-click',item)
      }
    }

  }

  //2.父组件
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    components:{
      cpn
    },
    methods:{
      cpnClick(item){
        console.log('cpnClick',item)
      }
    }
  })
</script>
</body>
</html>

Eli-sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子级向父级传递

子级向父级传递自定义事件的流程：在子组件中，通过$emit()来触发事件在父组件中，通过v-on：/@来监听子组件事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">
复制链接

扫一扫