vue2 父组件向子组件传递函数

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论列表实现</title>
</head>
<body>
<div id="app">
    <com2 @subshow="show"></com2>
</div>
 
<template id="tmp1">
    <div>
        <h1>这是子组件</h1>
        <input type="button" value="按我" @click="myclick">
    </div>
</template>
<script src="./lib/vue-2.4.0.js"></script>
<script>
    var com2={
        template:'#tmp1',
 
        data() {
            return {
                sonmsg: { name: '小头儿子', age: 6 },
            }
        },
        methods:{
            myclick(){
                // this.$emit('parentShow')
                this.$emit('subshow',this.sonmsg)
            }
        }
 
 
    };
    // 创建 Vue 实例,得到 ViewModel
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{
            show(msg){
                console.log("这是父组件的方法");
                console.log(msg)
            }
        },
        components:{
            com2:com2
        }
    })
 
</script>
</body>
</html>

  

posted @   巨兽~墨菲特  阅读(3627)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
历史上的今天:
2018-10-30 tkinter学习03
2018-10-30 tkinter学习02
点击右上角即可分享
微信分享提示