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 (父组件需要 ...
随机推荐
- [Offer收割]编程练习赛46
[Offer收割]编程练习赛46赛后题解 A.AEIOU 分析
- Linux 一些问题
终端以root账号执行 su - root
- Tcl/Tk语言学习------拆分字符串
字符串的拆分 前言 字符串的处理是每种语言经常会遇到的问题,tcl作为一门脚本语言自然也不例外,关于字符串的拆分,一般会有两种情况:1.使用单个字符拆分,2.使用字符串拆分. 1.使用单个字符拆分字符 ...
- 升级ruby的版本
升级ruby版本,有时候安装ruby的版本过低,需要进行升级,例如安装在centos6.7安装fpm需要ruby版本在1.9以上. 1.主机环境如下: [root@test ~]# cat /etc/ ...
- luoguP2408不同子串个数
传送门 可以知道每一个子串都是后缀的前缀,那么对于第\(i\)小的后缀的贡献就可以表示为n-sa[i]+1 然而会存在重复的子串,注意height数组的定义,对于sa[i-1]和sa[i],只有hei ...
- D - Bomb
//反向62 #include <iostream> #include <algorithm> #include <string> #include <cst ...
- java数据结构----树
1.树:树通常结合了有序数组和链表的优点,在树中查找数据项的速度和在有序数组中查找一样快,并且插入数据项和删除数据项的速度也和链表一样快. 2.树由边连接的节点而构成.节点一般代表着一些实体,节点间的 ...
- Verify the Developer App certificate for youraccount is trusted on your device
运行时报错-Verify the Developer App certificate for youraccountis trusted on your device. Open Settings ...
- [題解]（最短路）luogu_P1119災後重建
一道好題,然而看題解做的...... floyed的實質:只經過前k個點i到j的最短路,原狀態轉移方程為 f [ k ] [ i ] [ j ]=min( f[ k-1 ] [ i ] [ j ],f ...
- dubbo与springboot的三种整合方式
SpringBoot与dubbo整合的三种方式:1.导入dubbo-starter,在application.properties配置属性,使用@Service暴露服务,使用@Reference引用服 ...