Vue中子组件调用父组件的方法
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中子组件调用父组件的方法的更多相关文章
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
- vue 子组件调用父组件的方法
vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...
- React篇-子组件调用父组件方法,并传值
react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- vue 子组件调用父组件的函数
子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...
- react typescript 子组件调用父组件
//父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...
- vue.js（19）--vue中子组件调用父组件的方法
子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit('自定义方法名')语句完 ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue 子组件调用父组件方法
父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...
随机推荐
- 《Linux多线程编程手册》读书笔记
第二章 基本线程编程 1.(P25)如果多个线程等待同一个线程终止,则所有等待线程将一直等到目标线程终止.然后,一个等待线程成功返回,其余的等待线程将失败并返回ESRCH错误. 2.(P26)将新线程 ...
- oracle11g 导出空表
--对已存在的表 执行如下 ,要经过统计分析后 num_rows=0 才准确select 'alter table '||table_name||' allocate extent;' from us ...
- ＃ing＃我的日常知识管理160421
1. 知识来源:浏览是无时无刻的,知识爆炸的时代,信息在互联网上不再难以获得,却变得难以选择,取得有效的信息成了如今获取知识的重要环节…… 前端关注—— alloyteam.github.io 腾讯 ...
- 201709013工作日记--Android异步通信AsyncTask
参考相关博客:http://blog.csdn.net/liuhe688/article/details/6532519 在Android中实现异步任务机制有两种方式,Handler和AsyncTas ...
- MODIS产品分析和数据处理
ENVI+IDL 17种MODIS产品的功能解释 https://wenku.baidu.com/view/6fd329dcf524ccbff0218440.html ENVI读取MODIS数据大致步 ...
- Asp.net mvc验证用户登录之Forms实现
这里我们采用asp.net mvc 自带的AuthorizeAttribute过滤器验证用户的身份,也可以使用自定义过滤器,步骤都是一样. 第一步:创建asp.net mvc项目, 在项目的App_S ...
- 《Python3网络爬虫开发实战》PDF+源代码+《精通Python爬虫框架Scrapy》中英文PDF源代码
下载:https://pan.baidu.com/s/1oejHek3Vmu0ZYvp4w9ZLsw <Python 3网络爬虫开发实战>中文PDF+源代码 下载:https://pan. ...
- 网页程序 vs 桌面程序
网页程序 vs 桌面程序 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com 所谓的网页程序就是指以网页作为程序的操作界面,通过脚本语言“javascript”或其它客户端语言 ...
- Flash(as3) 调整显示对象颜色
在游戏开发中改变显示对象的颜色是比较常见的操作,那么除了在FlashCS中调整,AS3又提供了怎样的方式呢? ColorTransform 这个类是轻量级的应用,其构造参数如下: ColorTrans ...
- AbpZero后台模块化(1)
AbpZero的精髓就在于多租户模块化加载,如果不做到这两种的话,就没必要使用这个框架. 1.首先,我们得新建一个类库,用于存放我们写的业务代码. 在类库下分别建立三个类文件:TestAp ...