Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <script src="./lib/vue-2.4.0.js"></script>
</head>
<body> <div class="app">
<!-- 父组件向子组件传递方法，使用的是事件绑定机制，v-on 当我们自定义一个事件属性之后，那么子组件就能够通过某些方法来
调用，传递进去的这个方法了 -->
<log v-bind:dataflog="msg" @funcshow="show" ></log>
</div> <template id="log">
<div>
<h1>这是子组件界面----{{dataflog}}</h1>
<input type="button" @click="myclick" value="父组件传递过来的方法 子组件接收">
</div>
</template> <script> var vm=new Vue({
el:'.app',
data:{
msg:'看到数据了嘛'
},
methods: {
// 父方法接受参数
show(a){
console.log(a.name+'父组件方法');
}, },
components:{
log:{
template:'#log',
props:['dataflog'],
data(){
return {
duwei:{name:'duwei',age:30}
}
},
methods: {
myclick(){
// console.log('ok');
// 当点击子组件按钮的时候，如何拿到父组件传递过来的func 方法，并调用呢？
// emit英文愿意：是触发调用 发射的意思。
// this.$emit('funcshow')
// emit传递父组件中的方法，并且子组件向父组件传递消息
// this.$emit('funcshow',123,345)
this.$emit('funcshow',this.duwei); }, },
}, }
})
</script>
</body>
</html>
Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据的更多相关文章
- layer父界面调用子弹窗的方法和获取子弹窗的元素值总结
layer.open({ type: 2 ,title: false //不显示标题栏 ,closeBtn: false ,area: ['460px', '45%'] ,shade: 0.5 ,id ...
- [ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan ------------------ ...
- layer父页面调用子页面的方法
由于不知道如何在子页面获取到layer定义的确定按钮,于是就在子页面上定义了一个方法,然后在由父页面在点确定按钮时调用子页面所定义的这个方法,从而执行子页面方法里面的内容: 子页面代码: functi ...
- window.showModalDialog刷新父窗口和本窗口的方法及注意
window.showModalDialog刷新父窗口和本窗口的方法及注意: 一.刷新父窗口的方法: A.使用window.returnValue给父窗口传值,然后根据值判断是否刷新. 在w ...
- Vue 父组件往子组件传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue-父组件向子组件传递方法
1.父组件向子组件传递方法,使用的是事件绑定机制 v-on:传递给子组件的方法名=“父组件中的方法”
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- vue必须掌握之组件通信（7种方法）
方法一:$emit / props 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件 <!--父组件--> <template> ...
- Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
随机推荐
- ES6深入浅出-6 ES 6 模块-1.模块化速学
把模块先默认认为是豆腐块 为什么前端需要模块? 没有模块的方式 预览这个html页面 一共200行js代码 前100行在做一件事 ,另外100行在做另一件事,这样就是两个模块 main.js来 ...
- 【433】COMP9024 复习
目录: 01. Week01 - Lec02 - Revision and setting the scene 02. Week02 - Lec01 - Data structures - memor ...
- Spring MVC入门的实例
作为Spring MVC入门,以XML配置的方式为例.首先需要配置Web工程的web.xml文件. 代码清单14-1:web.xml配置Spring MVC <?xml version=&q ...
- 给APK签名，修改签名
简介: 本来是不需要签名的,但是我有个android的专用设备,限制安装,但是售后给我通过了一个证书的验证. 那么我想装什么软件,就需要这个证书验证. 现在记录一下签名的主要过程,还有修改签名的方法. ...
- PHPStudy后门事件分析
PHP环境集成程序包phpStudy被公告疑似遭遇供应链攻击,程序包自带PHP的php_xmlrpc.dll模块隐藏有后门.经过分析除了有反向连接木马之外,还可以正向执行任意php代码. 影响版本 P ...
- Windows 2016 服务器安全配置和加固
最近一个项目需要使用Windows服务器,选择安装了最新版的Windows 2016,上一次使用Windows服务器还是Windows 2003系统,发现变化还是挺多的,依次记录下来以备后面查阅. 目 ...
- C语言实现从左向右字幕滚动的效果
#include <stdio.h> #include <string.h> #include <windows.h> int main() { char str[ ...
- Appium移动自动化测试-----（六）4.运行第一个Appium脚本
新建maven空白工程 前置条件:安装eclipse或IntelliJ IDEA,及其maven插件,请自行百度 新建的工程如下: 新建目录apps,并将下载的安装包,拷贝到该目录下 打开POM增加依 ...
- python基础篇（三）
PYTHON基础篇(三) 装饰器 A:初识装饰器 B:装饰器的原则 C:装饰器语法糖 D:装饰带参数函数的装饰器 E:装饰器的固定模式 装饰器的进阶 A:装饰器的wraps方法 B:带参数的装饰器 C ...
- LeetCode 112. 路径总和(Path Sum) 10
112. 路径总和 112. Path Sum 题目描述 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和. 说明: 叶子节点是指没有子节点的节 ...