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,内部不管多少嵌套都可以直接取到最外 ...
随机推荐
- DX9纹理半像素偏移-Directly Mapping Texels to Pixels
原文:DX9纹理半像素偏移-Directly Mapping Texels to Pixels 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u01 ...
- iOS 中的 Deferred Deep Linking（延迟深度链接）
http://www.cocoachina.com/ios/20160105/14871.html Deep Linking 其实 deep linking 并不是一个新名词,在 web 开发领域,区 ...
- BZOJ 4420二重镇题解
链接 思路借鉴了这个博客: 我们可以想到状压dp 用一个十进制数来表示状态,即第i位表示位置i处的物品等级 用f[i][j][k]表示第i天,仓库的物品等级为j,状态为k时的最大收益 但是状态数貌似很 ...
- 洛谷 P4205 [NOI2005]智慧珠游戏 DFS
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P4205 [NOI2005]智慧珠游戏 题目描述 智慧 ...
- Leetcode884.Uncommon Words from Two Sentences两句话中的不常见单词
给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有不常用单 ...
- XML配置里的Bean自动装配与Bean之间的关系
需要在<bean>的autowire属性里指定自动装配的模式 byType(根据类型自动装配) byName(根据名称自动装配) constructor(通过构造器自动装配) 名字须与属性 ...
- laravel之文件上传
laravel框架中的文件上传我们应该如何实现此功能呢? 之前也是没有使用过laravel的文件上传功能,后来在网上找到一些教程,五花八门.让我看起来有点头疼. 有时候找到测试浪费好长时间最后还是出不 ...
- php Laravel Thrift使用TMultiplexedProcessor复用端口模式
thrift的使用中一般是一个Server对应一个Processor和一个Transport,如果有多个服务的话,那必须要启动多个Server,占用多个端口,这种方式显然不是我们想要的,所以thrif ...
- 【JZOJ4921】【NOIP2017提高组模拟12.10】幻魔皇
题目描述 幻魔皇拉比艾尔很喜欢斐波那契树,他想找到神奇的节点对. 所谓斐波那契树,根是一个白色节点,每个白色节点都有一个黑色节点儿子,而每个黑色节点则有一个白色和一个黑色节点儿子.神奇的节点对则是指白 ...
- jQuery事件大全(真的很全)
DOM Attribute $("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"te ...