vue-组件之间的通信:
组件之间的通信:
一个组件被调用,那么里面的数据就需要从前者调用,
因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,
谁调用这个组件谁就传递数据给这个组件,
所以就要暴露一些接口,供外界传递数据,这就是组件之间的通信。 组件实例的作用域是孤立的/每个组件都是独立的,
这意味着不能并且不应该在子组件的莫版内直接引用父子组件的数据
但是父子组件之间需要通信:
父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件
父组件想要和子组件之间产生通信,想要一个机制来完成 在vue.js中,父子组件的关系可以总结为 props down (传下去)/ events up(传上来)
父组件通过 props向下传递数据给子组件
子组件通过 events给父组件发送消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../vue.js"></script>
</head> <body>
<div id="app">
<!-- 父组件-->
<!--这个时候无论复制多少个组件,里面的内容都是一样的-->
<!--在开发中,每个组件的内容应该是不相同的,这就意味着在父组件调用的时候把数据传递过来-->
<!--.hj 与4对应-->
<!--多个属性用空格隔开 hj="宇轩" imgsrc="" title="" ...-->
<my-div hj="宇轩"></my-div>
<my-div hj="叶孤城"></my-div>
<my-div hj="北京"></my-div> </div>
<!---->
<template id="mu-div">
<!--.hj 与 5对应-->
<p>{{hj}}</p>
</template>
</body>
<script>
//1.创建组件
Vue.component('my-div',{
template:'#mu-div',
props:['hj'], //4.声明,父组件传递给子组件,(vue中不支持驼峰慢慢),多个属性用,号隔开
data(){
return{
hj:'西门吹雪'
}
}
}); var vm = new Vue({
el:'#app',
data:{}
})
</script>
</html>
vue-组件之间的通信:的更多相关文章
- vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制)
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
- vue组件之间的通信,父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue 组件之间 的通信
组件之间通信: 同级组件之间通信:两个组件定义应用到同一个vue实例之下: <div id="webapp" class="box"> & ...
- vue组件之间的通信, 父子组件通信,兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- Vue组件以及组件之间的通信
一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...
随机推荐
- express 的学习 (1)
- 安装`npm i express -S` - :引入express第三方对象 - :构建一个服务器对象 - :开启服务器监听端口 - :处理响应 1.下载 新建一个文件夹,cmd 进去,使用命令 ...
- leetcode-按奇偶排序数组II
Python解决方法: class Solution(object): def sortArrayByParityII(self, A): j = 1 for i in xrange(0, len(A ...
- leetcode-161周赛-1247-交换字符使得字符串相同
题目描述: 自己的提交: class Solution: def minimumSwap(self, s1: str, s2: str) -> int: count = {"xy&qu ...
- thinkphp wechat
该接口对应的文件为Com/Wechat.class.php, 主要用户接收微信推送过来的用户数据并自动回复. 注意:识别和分析用户发送的内容,并提供回复内容需要开发者更具实际情况自己实现,本接口值提供 ...
- this关键字的使用!
class Student{ String name; int age; Student(String name,int age){ this.name=name; this.age=age; } S ...
- targetSdkVersion和与target属性的区别
参考:http://blog.csdn.net/dai_zhenliang/article/details/8175781 AndroidMenifest.xml中targetSdkVersion和p ...
- mongodb副本集(选举,节点设置,读写分离设置)
1.相对于传统主从模式的优势 传统的主从模式,需要手工指定集群中的Master.如果Master发生故障,一般都是人工介入,指定新的Master.这个过程对于应用一般不是透明的,往往伴随着应用重新修改 ...
- smali与baksmali用法-基于2.2.2版本
下载地址:https://bitbucket.org/JesusFreke/smali/downloads/?tab=downloads 反编译dex java -jar baksmali-2.2.1 ...
- JS基础复习
js基础语法 Netcape js基础语法规范(ECMAScript1,2,3,3.1,5(IE9),6 ES ES6=es2015) DOM BOM ...
- 安装MikTex Portable
下载地址:http://miktex.org/portable 解压到一个目录 $(MikTex)下, 然后创建以下两个批处理程序: 1. run.bat, 用来运行.tex扩展名的文件 1: $(M ...