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 id="app">
<!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on,
当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
<com2 @func123="show"></com2>
</div> <template id="tmpl">
<div>
<h1>这是子组件</h1>
<input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
</div>
</template> <script>
// 定义了一个字面量类型的 组件模板对象
var com2 = {
template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
data() {
return {
sonmsg: '子组件中data中的数据'
}
},
methods: {
myclick() {
// 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
// emit 英文原意： 是触发，调用、发射的意思
// this.$emit('函数名称', 参数, 参数) func123是
this.$emit('func123', this.sonmsg)
}
}
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
datamsgFormSon: '父组件中的数据'
},
methods: {
show(data) {
alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
this.datamsgFormSon = data
alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
}
},
components: {
com2
}
});
</script>
</body> </html>
Vue 父组件往子组件传递方法的更多相关文章
- vue父页面给子页面传递数据
父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 的父组件和子组件互相获取数据和方法
父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
- Vue 父组件向子组件传值，传方法，传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
- vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
随机推荐
- python学习笔记08-- socket编程
本节内容: 一.网络基础知识 二.socket概念及相关语法 2.1socket概念 2.2socket解释 2.3socket模块功能介绍 2.4socket粘包问题 2.5Socket多并发 一. ...
- Codeforces Round #283 (Div. 2) A. Minimum Difficulty【一个数组定义困难值是两个相邻元素之间差的最大值。 给一个数组，可以去掉任意一个元素，问剩余数列的困难值的最小值是多少】
A. Minimum Difficulty time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 跟我一起学extjs5(02--建立project项目)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jfok/article/details/35569057 跟我一起学extjs5(02--建立pro ...
- JavaScript：利用递归实现对象深拷贝
先来普及一下深拷贝和浅拷贝的区别浅拷贝:就是简单的复制,用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是当修改对象b的时候,我们发现对象a的值也被改变了 b. ...
- 算法复杂度表示（大O表示法）
- 概念: 大O表示法:称一个函数g(n)是O(f(n)),当且仅当存在常数c>0和n0>=1,对一切n>n0均有|g(n)|<=c|f(n)|成立,也称函数g(n)以 ...
- HTTP之request请求（注册）
HTTP之request请求 request:请求 作用:获取浏览器发送过来的数据 组成部分:请求行 请求头 请求体 操作请求行 格式: 请求方式 请求资源 协议/版本 常用方法:HttpServle ...
- php怎么自动加载
在 PHP 代码的顶部你是不是经常看到这样的代码. require 'lionis.php'; require 'is.php'; require 'cool.php'; 如果只是引入几个 PHP 脚 ...
- WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放
WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放 开发环境: Microsoft Windows 7 SP1 Microsoft.NET Framework 4.0 ( ...
- python 导入整个模块
- Hdu 1729 Nim博弈
点击打开题目链接 之前没做过这题,因为学弟问到我如果来求该题的sg值,才做了这题. 首先, 是多堆Nim博弈毫无疑问,这题是往一个有固定容量的箱子里放石子,和从一堆石子里面拿出石子是一个道理. 和传统 ...