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 ...
随机推荐
- lpm_clshift ip仿真
今天仿真了一下lpm_clshift ip 其中din为输入的信号,sh_out为输出的信号. 以上为IP的设置. 可以看到din 的00000010 对应的step的2,一个时钟后sh_out的输出 ...
- swagger 入门
官网:http://swagger.io/ Swagger UI 下载地址: https://github.com/swagger-api/swagger-ui 文档:README.md ### Do ...
- 使用process_monitor.sh监控hadoop进程的crontab配置
可以从下列链接找到process_monitor.sh:https://github.com/eyjian/libmooon/blob/master/shell/process_monitor.sh ...
- ZOJ2405 Specialized Four-Digit Numbers 2017-04-18 20:43 44人阅读 评论(0) 收藏
Specialized Four-Digit Numbers Time Limit: 2 Seconds Memory Limit: 65536 KB Find and list all f ...
- Flash CC2015软件安装教程
FLCC2015/64位下载地址: 链接:https://pan.baidu.com/s/1c1WoTTu 密码:k4hn 软件介绍: Flash是一种动画创作与应用程序开发于一身的创作软件.Flas ...
- 我的成长比价系列：java web开发过程中遇到的错误一：sql语句换行错误
字符串换行导致的错误,确切的说是马虎的错误,自己在编写简单的servlet项目时,在StudentDao.java 中的 查询语句:String sql= "SELECT Type,fl ...
- VS2010+Oracle11+Entity Framework4.1环境搭建及常见问题
在微软的实体数据模型中存在四种查询方式: SQL字符串:Linq:Linq to SQL:Linq to Entity(ESQL) 对于Linq SQL目前微软虽然仍在支持,但微软已经声明不再推荐. ...
- .net core 与ELK（4）后台运行els可视化工具和Kibana
which nohup .bash_profile中并source加载 如果没有就安装吧 yum provides */nohup nohup npm run start & nohup ./ ...
- 【BZOJ3238】[AHOI2013]差异
[BZOJ3238][AHOI2013]差异 题面 给定字符串\(S\),令\(T_i\)表示以它从第\(i\)个字符开始的后缀.求 \[ \sum_{1\leq i<j\leq n}len(T ...
- .NET Core中使用Dapper操作Oracle存储过程最佳实践
为什么说是最佳实践呢?因为在实际开发中踩坑了,而且发现网上大多数文章给出的解决方法都不能很好地解决问题.尤其是在获取类型为OracleDbType.RefCursor,输出为:ParameterDir ...