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 (父组件需要 ...
随机推荐
- CodeForces660B【模拟—水】
感觉模拟题用函数分块写比较清晰~传参的话,字符串要么直接全局,或者指针也是容易操作,总之思路清晰,然后分块清晰,模拟wa的少吧. 这题水题,不说了. #include <bits/stdc++. ...
- Unity3D命令行Build
转自:http://www.cnblogs.com/gameprogram/archive/2012/05/11/2496303.html 本来是没想用这个命令行Build方式,可惜电脑不知道怎么的就 ...
- Unity3D 图形优化
Unity3D 图形优化 例如DrawCall,我得到的是一些并不完全正确的信息,例如将N个纹理打包成一个图集,这个图集就只会产生一个DrawCall,如果不打成图集,那么就会有N个DrawCall. ...
- Mol Cell Proteomics. |廖文丽| 阿尔兹海默症临床前期的脑脊液中突触蛋白的变化先于神经变性标志物
大家好,本周分享的是发表在Molecular & Cellular Proteomics. 上的一篇关于阿尔兹海默病临床前期生物标志物鉴定的文章,题目是Changes in synaptic ...
- assembly x86(nasm)子程序1
T: 将BUF开始的10个单元中的二进制数转换成两位十六进制数的ASCII码,在屏幕上显示出来.要求码型转换通过子程序HEXAC实现,在转换过程中,通过子程序DISP实现显示. 思路: Main主调程 ...
- how browser handler file:/// link
1. why browser can only open .txt file directly, pop up open or save dialog for others? 2. html cann ...
- python学习之调试 错误捕捉及处理
1 捕捉错误:try except Err_Case1: pass except Err_Case2: pass else: 正常情况: finally: 无论是否异常都要 处理的代码 w ...
- ASP.NET Core MVC/WebAPi 模型绑定
public class Person { public string Name { get; set; } public string Address { get; set; } public in ...
- js实现文本框验证和实现小数的加减乘除
<script type="text/javascript"> //加法 var m=accAdd(1.22,1.22); //减法 var m1=accSub(1.2 ...
- 极简的css浮动窗口
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...