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 ...
随机推荐
- MATLAB常用函数
Matlab的内部常数 pi 圆周率 exp(1) 自然对数的底数e i 或j 虚数单位 Inf或 inf ...
- day4之装饰器进阶、生成器迭代器
装饰器进阶 带参数的装饰器 # 某一种情况# 500个函数加装饰器, 加完后不想再加这个装饰器, 再过一个季度,又想加上去# 你可以设计你的装饰器,来确认是否执行 # 第一种情况 # 想要500个函数 ...
- mybatis操作数据库
导入jar包 共13包 注意:mysql-connction的版本是5.1.7版低版本可能不行 2.编写配置文件 a. 配置连接数据库的文件 a.1创建数据库 user表 a.2配置文件目录 a.2. ...
- stdafx.h、stdafx.cpp是干什么用的？为什么我的每一个cpp文件都必须包含stdafx.h？ Windows和MFC的include文件都非常大，即使有一个快速的处理程序，编
sstdafx.h.stdafx.cpp是干什么用的?为什么我的每一个cpp文件都必须包含stdafx.h? Windows和MFC的include文件都非常大,即使有一个快速的处理程序,编译程序也要 ...
- C语言 fread()与fwrite()函数说明与示例
1.作用 读写文件数据块. 2.函数原型 (1)size_t fread ( void * ptr, size_t size, size_t count, FILE * stream ); 其中,pt ...
- codevs 1083
这道题是看了人家大牛的解题报告: 对了,要说明一下,(A+B)&1 ,表示,判断(A+B)是奇数否? 下面给出代码: #include<iostream> #include< ...
- hdu 2049 不容易系列之考新郎 && 对错排的详解
题目 错排: 当n个编号元素放在n个编号位置,错排的方法数记着D(n) ⒈把第n个元素放在一个位置,比如位置k,一共有(n-1)种方法: ⒉放编号为k的元素,这时有两种情况: 1°把它放到位置n,那 ...
- nodejs 获取文件的编码方式
使用nodejs获取文件夹内文件的编码方式:使用jschardet模块. 下面的代码还有问题,没有添加结束的语句,没有判断应该在哪执行res.send(). res.send()不能放在forEach ...
- 动态类型和匿名类型在asp.net webapi中的应用
1. 动态类型用于webapi调用 假设需要调用一个webapi,webapi返回了一个json字符串.字符串如下: {"ProductId":"AN002501&qu ...
- 关于ListBox的几个问题
Winfrom ListBox绑定数据源list界面不更新问题与绑定数据源不可CRUD问题 场景:获取一个listbox的选中项添加到另一个listbox中 解决方案-1:不要直接绑定DataSour ...