VEU中的组件之间的数据传递

组价三部曲

创建组件。
注册组件。
使用组件。

组件之间的数据传递的方式
1. 父传子：通过props属性传递
2. 子传父通过$emit属性，用来发布自定义事件
3. 兄弟组件之间的传递

1.父传子

把父组件的数据以动态属性的方式放在当前子组件的行间属性上
在子组件中用props接收到这个属性（数组、对象）
在子组件取值使用动态的属性名取值

<body><div id="app"><child :c="msg"></child><child :c="num" :b="obj"></child><child :b="obj"></child></div><script src="vue.js"></script><script>let child={data(){return {//msg:"苏大强" :如果自己身上也有msg这个属性，会去取父组件上的msg}},props:["c","b"],template:"<div>{{c}}{{b}}</div>"}let vm=new Vue({el:"#app",data:{msg:"春光郑好",num:"豫战豫勇",obj:"中国加油"},components:{child}})</script>
</body>

2.子传父

在VUE中子组件不能直接修改父组件的数据，想更改数据需要通过$emit属性，用来发布自定义事件，进行修改。
自定义的名称必须小写，@changemoney=

<body><div id="app">父亲： {{money}}<!-- // 自定义事件 --><son :m="money" @changemoney="fn" :b="fn"></son></div><script src="vue.js"></script><script>let son = {data(){return {}},props:["m","b"],// props接收到的属性也会放在组件实例上一份 methods:{add(){// this==> 组件的实例  this.$emit("changemoney",1080);//这里面的1080传给fn中的val// this.b();}},template:"<div>儿子：{{m}}<button @click='add'>点一下</button></div>"}let vm = new Vue({el:"#app",data:{money:888},methods:{fn(val){this.money=val;}},components:{son}});</script>
</body>

子传父中的sync修饰符
代码中的两个方法是上面子传父的语法糖，也就是简写。写了这两个后父组件的methods中的方法就可以不写了。

<body><div id="app">父亲： {{money}}<!-- $event接收的是$emit的第二个参数 --><!-- <son :m="money" @update:m="money=$event"></son> --><son :m.sync="money" :v.sync="val"></son></div><script src="node_modules/vue/dist/vue.js"></script><script>// 语法糖let son = {data(){return {}},props:["m","v"],methods:{add(){this.$emit("update:m",2000);this.$emit("update:v",8899);}},template:"<div>儿子：{{m}}<button @click='add'>多要点</button>{{v}}</div>"}new Vue({el:"#app",data:{money:888,val:1000},methods:{},components:{son}});</script>
</body>

3.兄弟之间的数据传递（eventBus）

兄弟之间的组件数据传递：eventBus;
$on : 订阅
$emit : 发布；轮询对应的事件池，让其中的方法执行
let eventBus = new Vue;// 这就是一个容器;联系了兄弟之间的纽带
下面写一个简单的案例，点弟弟组件让哥哥组件变绿，点弟弟让哥哥变红

<body><div id="app"><bro1></bro1><bro2></bro2></div><script src="../VUE上课/vue.js"></script><script>// 兄弟之间的组件数据传递：eventBus;// $on : 订阅// $emit : 发布；轮询对应的事件池，让其中的方法执行let eventBus = new Vue;// 这就是一个容器;联系了兄弟之间的纽带let bro1 = {data(){return {color:"红色"}},created(){//这里面可以那倒methods中的方法，但是不能拿到真实的DOMeventBus.$on("changeGreen",this.changeGreen)},methods:{fn1(){eventBus.$emit('changeRed');},changeGreen(){this.color="绿色"}},template:"<div>{{color}}<button @click='fn1'>变红</button></div>"};let bro2 = {data(){return {color:"绿色"}},created(){eventBus.$on("changeRed",this.changeRed)},methods:{changeRed(){this.color="红色";},fn2(){eventBus.$emit('changeGreen');}},template:"<div>{{color}}<button @click='fn2'>变绿</button></div>"};let vm = new Vue({el:"#app",data:{},components:{bro1,bro2}})</script>
</body>

4. Vuex 适用于父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
Vuex 的状态存储是响应式的。当 Vue 组件从store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
这里面详细解释了一下什么是VUEX可以参考一下
https://blog.csdn.net/Cool_so_cool/article/details/105467214

VEU中的组件之间的数据传递相关推荐

WEB前端 vue学习二组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作一·父组件向子组件传递数据在Vue中 ...
uniapp 子组件 props拿不到数据_谈一谈使用 webpack 开发时，Vue 组件之间的数据传递...
•我们在学习Vue的时候,难免会使用各个组件之间传递数据.•先来介绍一下Vue中组件传递的方式,有父组件传递给子组件数据,子组件传递给父组件数据,父组件直接获取子组件中数据,子组件直接获取父组件数据以 ...
react中父子组件数据传递，子组件之间的数据传递
首先有三个js文件,index.js(父组件) baseForm.js(子组件) etable.js(子组件) 在index.js中定义一个arr数组,传给BaseForm组件 import Reac ...
实现非父子之间通信，兄弟组件之间的数据传递--eventBus
vue中,组件传值的方法常见的也就那几种, 1.父组件向子组件传值,用props 属性, 2.子组件主要通过事件传递数据给父组件子向父传数据可以用$emit触发传,但是这种方法无法实现兄弟组件直接传数 ...
react 组件怎么公用_在React中的组件之间共享数据
我正在开发使用Meteor和React作为视图引擎的应用程序考虑下图: 当触发C4按钮单击事件时,我需要更改C2组件状态.由于他们没有直接关系,因此我无法直接从C4进入C2状态. 另一个示例是从Co ...
vue3 语法之父组件，子组件之间的数据传递
世事洞明皆学问,人情练达即文章.(<红楼梦>) 子组件使用v-model 父组件 // father.vue <template><div class="fat ...
三个activity之间跳转数据传递_第二百四十二回：Android中Fragment之间的数据传递概述...
各位看官们大家好,上一回中咱们说的是Android中Activity之间数据传递的例子,这一回咱们说的例子是Fragment之间的数据传递.闲话休提,言归正转.让我们一起Talk Android吧! ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...

VEU中的组件之间的数据传递

1.父传子

2.子传父

3.兄弟之间的数据传递（eventBus）

4. Vuex 适用于父子、隔代、兄弟组件通信

VEU中的组件之间的数据传递相关推荐

最新文章

热门文章

VEU中的组件之间的数据传递

1.父传子

2.子传父

3.兄弟之间的数据传递 （eventBus）

4. Vuex 适用于 父子、隔代、兄弟组件通信

VEU中的组件之间的数据传递相关推荐

最新文章

热门文章

3.兄弟之间的数据传递（eventBus）

4. Vuex 适用于父子、隔代、兄弟组件通信