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>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// 声明子组件（子组件在前避免父组件找不到）
/*
子组件向父组件发送消息：需要通过事件，需要在子组件声明的时候通过某个
事件来触发父组件自定义的事件，最后通过该父组件的自定义事件来处理消息
*/
var Content = {
template: `<div class='content'>我是子组件
<p>我是从父组件接收到的消息： {{ mess }}</p>
<button @click='sendF'>点击我，向父组件发送消息吧～</button>
</div>`,
props:['mess'],
methods: {
sendF() {
// 去触发父组件中自定义的事件
// 第一个参数是要触发父组件中事件的名字，第二个参数传入的值
this.$emit('reciveMe','10001010001');
}
}
};
/* 父组件向子组件发送消息：需要将要发送的消息
与子组件的自定义属性相绑定;在声明子组件时用
props:['自定义属性名']接收到发送过来的消息；
然后此时子组件就可以利用该属性名使用该消息了
*/
// 声明父组件
var App = {
template:`<div class='main'>我是父组件
<Content v-bind:mess='msg' @reciveMe='showMess'/>
</div>`,
data(){
return {
msg: 'hi'
}
},
components: {
Content
},
methods:{
showMess(data){
alert('子组件向我发送了消息： ' + data);
}
}
};
new Vue({
el: '#app',
// 使用局部组件
template: `
<App />
`,
data:function(){
return {}
},
// 挂载局部组件
components: {
App
}
});
</script>
</body>
</html>
Vue之父子组件的通信的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- 【vue】父子组件间通信----传函数
(一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...
- vue中父子组件的通信
1.父组件向子组件传递数据 父组件传递:data = parent.data 子组件接收props: {data:{}} 2.子组件向父组件传递数据(https://vuefe.cn/v2/guide ...
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
随机推荐
- Git小白到老鸟的进阶之路
点"计算机视觉life"关注,置顶更快接收消息! 小白:师兄,师兄,上次你教我的操作,我傻乎乎的执行了一遍,可是那个Git究竟是什么那? 师兄:小白莫慌,Git就是一种版本控制,小 ...
- vue-cli目录结构介绍002
总体框架 一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. 文件结构细分 1.build——[webpack配置] bui ...
- 随机函数rand()
一.C++中不能使用random()函数 random函数不是ANSI C标准,不能在gcc,vc等编译器下编译通过.但在C语言中int random(num)可以这样使用,它返回的是0至num-1的 ...
- typescript语法入门
一.字符串 1.多行字符串: (支持换行) ` <div></div> <p></p> ` 2.表达式:${} --> 变量 var a = 'd ...
- perl C/C++ 扩展（一）
通过h2xs 中间件,我们可以快速的使用c或则C++ 库来实现perl 扩展功能 第一讲:跑通hello world 程序******************************我们使用命令:h2 ...
- SQL COUNT DISTINCT 函数
定义和用法 可以一同使用 DISTINCT 和 COUNT 关键词,来计算非重复结果的数目. 语法 SELECT COUNT(DISTINCT column(s)) FROM table 例子 注意: ...
- 在iOS11 自定义titleview问题（位置 按钮点击）
喜欢交朋友的加:微信号 dwjluck2013 1.在自定义titleview的.h文件 里重写 intrinsicContentSize 属性 @property(nonatomic, assign ...
- __contains__, __len__,__reversed__
__contains__():当使用in,not in 对象的时候 调用(not in 是在in完成后再取反,实际上还是in操作) class A(object): def __init__(self ...
- AKOJ-2010-魔法石
链接:https://oj.ahstu.cc/JudgeOnline/problem.php?id=2010 题意: Vyoung最近收集到一大批魔法石,这些魔法石有两种特性,攻击和防守,不同特性的两 ...
- tera term 的一个命令解析脚本
;用虚拟串口虚拟2个串口,tera term使用串口2 ;设置串口2 波特率 115200,超时500ms;如果收到串口发来OK则回复SUCCESS;如果收到ERROR则回复faile;若超时则发送t ...