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 ...
随机推荐
- Java IO之字符流
public static void main(String[] args) { FileWriter fw = null; try { fw = new FileWriter("/User ...
- s28 LNMP架构服务搭建
nginx-location使用 location语法 location使用的语法例子为: location [=|~|~*|^~] uri{ 对location语法列表说明. |1ocation | ...
- Linux下安装配置 Jdk1.6+Tomcat6+Apache2.2.x+jk_mod1.2 详解
本篇以Redhat AS5,内核为Linux 2.6.18-8.el5 为例,其中Redhat/Fedora系列基本一致,其他Linux或者版本均可以参考. STEP 1 软件下载:1. jdk1.6 ...
- UVa 11732 "strcmp()" Anyone? （左儿子右兄弟前缀树Trie）
题意:给定strcmp函数,输入n个字符串,让你用给定的strcmp函数判断字符比较了多少次. 析:题意不理解的可以阅读原题https://uva.onlinejudge.org/index.php? ...
- VBA替换函数
Sub test() On Error Resume Next Dim arr1, arr2, i, j arr1 = Range("T1:EI3") arr2 = Range(& ...
- 简单的Java,Python,C,C++
Java 语言 //package main //注意不要添加包名称,否则会报错. import java.io.*; import java.util.*; cin.hasNext(); cin.h ...
- linux cpu过高原因及代码定位
1. top命令查看CPU和内存占用率 top回车,然后按1 发现进程PID 35163 CPU和内存占用率都很高 top - 06:13:47 up 5:31, 1 user, load av ...
- uniGUI试用笔记（九）uniGUI执行程序部署有3种形式1
uniGUI执行程序部署有3种形式 1.ISAPI模式 部署在IIS或Apache,程序编译为Dll形式,没有试,准备后续专门测试一下. 2.标准执行文件模式 将软件编译成一个独立的Exe文件,包括了 ...
- 我要总结基本书 .net稍微有些深度的书籍看看
1. 你必须知道的.NET 2. C# in depth 3.C#并发编程经典实例 4.ASP.NET MVC 4框架揭秘 5.NET最佳实践 6..NET探秘 .NET安全编程 .NET企业服务框架 ...
- Linux系统下ping命令报错 name or service not know
问题描述 CentOS,但是当执行ping命令的时候,提示name or service not known 解决方法 1.添加DNS服务器 vi /etc/resolv.conf 进入编辑模式,增加 ...