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 (父组件需要 ...
随机推荐
- 洛谷 - P2051 - 中国象棋 - 简单dp
https://www.luogu.org/problemnew/show/P2051 一点都不简单的简单dp. 还是从旧行转移到新行,而不是考虑新行从哪些旧行转移吧. #include<bit ...
- iOS QQ 登录
QQSDK 看官网的文档,确实让人头疼的一件事,说是两个资源文件,就找到了一个(TencentOpenAPI.framework),Demo中也没有找到. 接下来具体实现: 导入库: 添加SDK依赖的 ...
- Codeforces710C【数学】
n阶幻方问题::http://blog.csdn.net/fengchaokobe/article/details/7437767 学一下就好啦~ 奇幻七绝 先填上行正中央, 依次斜填切莫忘. 上格没 ...
- WinMain和main
WinMain的原型: int WINAPI WinMain(HINSTANCE hinstance,//程序本身的实例句柄 HINS ...
- vant搜索框问题
最近使用vant搜索框时发现,当输入内容点击一次搜索有数据,点击错号把内容去掉再点击搜索,都没进入点击搜索方法. 解决方法:把bindtop改成bindtouchstart <van-searc ...
- 你了解SVN, CVS等版本控制器吗?
版本控制器SVN, CVS是两种版本控制器, 需要配套相关的SVN, CVS服务器, SCM是xcode里面配置版本控制的地方, 版本控制的原理就是A和B同时开发一个项目, A写完当天的代码之后把代码 ...
- extern用法详解(转)
1 基本解释 extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义. 另外,extern也可用来进行链接指定. 2 问题:ext ...
- scrapy框架中Download Middleware用法
scrapy框架中Download Middleware用法 Downloader Middleware处理的过程主要在调度器发送requests请求的时候以及网页将response结果返回给sp ...
- 洛谷1005（dp）
1.不要贪,缩小区间去dp就好. 2.预处理指数. 3.__int128可还行. #include <cstdio> #include <cctype> #include &l ...
- c#学习系列之跳出循环 break,continue
break是完全跳出循环: ) { ) break; Console.WriteLine(a++); } 此处输出1,2,3,4,5,6,7,8 continue是跳出当前的循环: ;i<=;i ...