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 (父组件需要 ...
随机推荐
- TP5之查询那些事
1.使用 model 查询,查出的类型为 对象 $a 是一个对象,使用 $a->name 的方式来获取 对象里的属性 2.使用 db 查询,查询出的是 数组 $b 是一个数组,使用 $b['na ...
- Qt 生成word、pdf文档
需求:将软件处理的结果保存为一个报告文档,文档中包含表格.图片.文字,格式为word的.doc和.pdf.生成word是为了便于用户编辑. 开发环境:qt4.8.4+vs2010 在qt的官网上对于p ...
- hdoj5875【二分+RMQ】
全部从我大哥那里学习得来.. 一开始硬着头皮就是根据思路上线段树,明知是T还要写(因为线段树还不是很熟,趁机练一发) 后来果然T了,然后就去学了一发RMQ的ST算法,查询是O(1). ST算法主要: ...
- 計蒜客/小教官(xjb)
題目鏈接:https://nanti.jisuanke.com/t/366 題意:中文題誒~ 思路: 先通過給出的條件構造一個符合題意的數組(可以是任意一個符合條件的數組,菜雞不會證明: 然後構造的數 ...
- suse 11.4添加阿里源
感谢SilenMark 作者,让我找到了一个可用的suse 国内源. 大家直接使用root 用户执行以下命令,添加阿里源 zypper addrepo -f http://mirrors.aliyun ...
- nacos启动
nacos下载 https://github.com/alibaba/nacos 1.执行数据库脚本 2.修改配置文件application.propertiesspring.datasource.p ...
- linux进行文件vim编辑时没有退出文件直接关闭出现E325: ATTENTION Found a swap file by the name "/usr/local/php/etc/.php.ini.swp"
E325: ATTENTIONFound a swap file by the name "/usr/local/php/etc/.php.ini.swp" ow ...
- springMVC-RESTful支持
RESTful支持 什么是restful? Restful就是一个资源定位及资源操作的风格.不是标准也不是协议,只是一种风格,是对http协议的诠释. 资源定位:互联网所有的事物都是资源,要求url中 ...
- crontab 在unix 没有执行。
Quote: 引用 2 楼 jdwq33 的回复: Quote: 引用 1 楼 mp777323 的回复: 03 * * * * sh /opt/pro_some.sh 我试过了,这样也不行,难道是我 ...
- 基于Matlab的标记分水岭分割算法
转自:http://blog.sina.com.cn/lyqmath 1 综述 Separating touching objects in an image is one of the more d ...