子传父cpn9-emit-child2father

一木难求

于 2021-07-09 01:19:14 发布

阅读量94

点赞数

分类专栏： Vue前端开发

本文链接：https://blog.csdn.net/longwind8/article/details/118587222

版权

Vue前端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <cpn @catclick="queryDataf"></cpn>
</div>
<template id="tp1">
  <div>
    <ul>
      <li v-for="cat in c_catergries" @click="queryData(cat)">{{cat.name}}</li>
    </ul>
  </div>
</template>

<script src="../vue.js"></script>
<script>
  const cpn = {
    template:"#tp1",
    props:{
      c_catergries:{
        type:Array,
        default(){
          return [
            {id:1,name:"默认分类1"},
            {id:2,name:"默认分类2"}
          ];
        }
      }
    },
    methods:{
      queryData(item){
        console.log("子组件点击事件：",item);
        this.$emit("catclick",item);
      }
    }
  }
  
  const app = new Vue({
    el:'#app',
    components:{
      cpn,
    },
    data:{
        message:"你好啊",
    },
    methods:{
      queryDataf(item){
        console.log("父组件收到子组件消息",item);
      }
    },
    created(){
        console.log("生命周期钩子函数，Vue实例已创建")
    }
  })
</script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一木难求

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子传父cpn9-emit-child2father

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <cpn @catclick="queryDataf"></cpn></div><template id="tp..
复制链接

扫一扫