Vue中子组件调用父组件的方法

相关Html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

    </style>

</head>

<body>

<div id="app">

    <!--父组件可以在引用子组件的时候,通过属性绑定的形式(v-bind:),-->

    <!--把需要传递给子组件的数据,以属性绑定的形式传递到子组件中 给子组件使用-->

    <com2 @func="show"></com2>

</div>

<template id="temp1">

    <div>

        <h1>这是子组件</h1>

        <input type="button" value="这是子组件按钮 点击后触发父组件的func方法"

               @click="myclick"

        >

    </div>

</template>

<script>

    var com2 = {

        template: '#temp1',

        data: function () {

            return {

                sonmsg: {name: '大头儿子', age: 6}

            }

        },

        methods: {

            myclick: function () {

                //当点击子组件的按钮的时候如何拿到父组件的func方法 并调用

                //$emit() 原意:触发

                //第二个参数可以传参

                this.$emit('func', this.sonmsg);

                console.log('ok');

            }

        }

    }

    var vm = new Vue({

        el: '#app',

        data: {

            datamsgFromSon: null

        },

        methods: {

            show: function (data) {

                console.log("调用了父组件的func,并且data为:" + data);

                console.log(data);

                this.datamsgFromSon = data;

            }

        },

        components: {

            com2: com2

        }

    });

</script>

</body>

</html>

Vue中子组件调用父组件的方法的更多相关文章

  1. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  2. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  3. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  4. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  5. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

  6. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  7. vue.js（19）--vue中子组件调用父组件的方法

    子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...

  8. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  9. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

随机推荐

  1. C语言中union关键字

    union 关键字的用法与struct 的用法非常类似. union 维护足够的空间来置放多个数据成员中的“一种”,而不是为每一个数据成员配置空间,在union 中所有的数据成员共用一个空间,同一时间 ...

  2. 201521123035-个人作业4——alpha阶段个人总结

    个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 第一部分 类别 具体技能和面试问题 现在的回答(大三) 语言 最拿手的计算机语言是一?,代码量多少?(偏前端 ...

  3. CF1096D Easy Problem(DP)

    题意:给出一个字符串,去掉第i位的花费为a[i],求使字符串中子串不含hard的最小代价. 题解:这题的思路还是比较套路的,    dp[i][kd]两维,kd=0表示不含d的最小花费,1表示不含rd ...

  4. codeforces 261B Maxim and Restaurant(概率DP)

    B. Maxim and Restaurant time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  5. ORACLE 管道技术应用

    但是使用管道函数的时候是可以返回一个package里面定义的type的. create or replace package test_typeis    type test_type_record ...

  6. Python学习-30.Python中的元组（tuple）

    元组使用()定义,元组一旦定义就无法修改. 元组的索引方式同列表,也是使用[]. 元组也可以进行切片操作,使用方式同列表一样. 可以说,一个没法修改的列表就是元组. 在没有修改操作的情况下,应尽可能使 ...

  7. Hyper-V启动虚拟机，消耗C盘大量磁盘空间

    问题描述 经常使用Hyper-V虚拟机的朋友,可能会碰到这样的现象,当启动某些虚拟机的是否,发现C盘的空间突然减少,减少的空间与虚拟机的内存一样大少. 通过分析C盘空间的磁盘文件,发现在Hyper-V ...

  8. 创建TFS备份计划失败，错误提示：TF400997

    问题描述 在一个TFS 2018 + SQL Server 2017的环境中,从TFS控制台中配置备份计划时,系统提示错误TF400997,需要授予数据库服务账户sqlservice@domain.c ...

  9. 蚂蚁男孩.队列组件（Framework.Mayiboy.Queue）

    它能做什么 主要是用来方便使用队列而诞生,该组件封装了Queue和Redis中的队列,能够通过简单配置就可以高效快速使用起来. 使用说明 一.    下载源码,自己手动编译,手动引用必要的程序集.(需 ...

  10. JavaScript正则表达式匹配中英文以及常用标点符号白名单写法

    我们在编程中经常会遇到特殊字符过滤的问题,今天我们提供一种白名单方式过滤 直接上代码 function RegEXP(s) { var rs = ""; for (var i = ...