两个子组件之间的传值

举例：将A的drawerStart数值传递给B,来决定B的某个样式是否显示,并且点击 @click="changerDrawerStart"会改变 drawerStart的数值（这里可以使用监听watch，监听drawerStart的改变），通过$emit方法来实现传参的方式

组件A代码：

思路：如果两个子组件在同一个父组件上，可以将父组件作为一个桥梁(用一个中间值)，中间商，先将决定性元素的子组件A的值先传给父组件，再通过父组件传给另外一个子组件B

具体步骤如下：

子组件A-主动组件

<template><div class="input-search" :style="{width:width+'px'}"><p class="searchBody"><img :src="searchImg" alt=""  @click="changerDrawerStart" v-show="drawerStart" ></p></div>
</template>
<script>
export default {name: 'inputSearch',//子组件的名称data () {return {drawerStart: false,//初始化drawerStart}},watch: {drawerStart (t) {console.log(‘t’，t)监听drawerStart，查看drawerStart的改变，可以打印一下t，这里的t就是指代drawerStart的数值this.$emit('drawerShow', t)//主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据}},methods: {changerDrawerStart () {//点击，改变drawerStart的值this.drawerStart = !this.drawerStart}}
</script>

桥梁-父组件

<template>
<div class="left-nav-main"><input-search @drawerShow="drawerShow" ></input-search>//子组件A<header-drawer//子组件B:isShow='isShow'></header-drawer>
</div>
</template>
<script>
export default {data () {return {isShow : false,//中间值isShow初始化}},methods: {drawerShow (t) {//将drawerShow的值（即t），赋给中间值isShowthis.isShow = t},}
</script>

子组件B-被控制组件：

<template>
<div class="drawer" ><p  v-show="!isShow" class="current-title" >{{headerData.renderTitle}}</p>
</div>
</template>
<script>
export default {props: {//props接受父组件传递的值。isShow:{type:Boolean,default:[]}},
</script>

方法总结：两个步骤：
1.子组件A=>父组件：组件A使用$emit传递
2.父组件=>子组件B：组件B使用props接受

两个子组件之间的传值相关推荐

vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
触发父组件变量_Vue组件之间的传值
我们知道组件之间传值无非就三种情况父组件给子组件传值子组件给父组件传值兄弟组件之间的传值父 => 子老王是个有钱人,准备把自己的家产传给宝贝儿子小王用代码模拟实现就是下图这样现在小 ...
vue修改代码同步页面_vue实现两个组件之间数据共享和修改操作
我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了 ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
Vue学习——组件基础之父子组件之间的传值
一.父组件向子组件传值作用:因为在Vue的组件化开发中页面的各个功能模块对应各个组件,组件之间的传值变得尤为重要. 举例:父组件相当于导航栏,子组件相当于点击导航栏之后显示对应的内容界面:点击导航栏 ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
Android两个子线程之间通信
Android中,相信主线程和子线程之间的通信大家都不陌生了吧.在一次面试经历中被问到了两个子线程之间是如何进行通信的.哎呦!这可蒙住我了.后来回家研究了下,分享给大家. 其实android中线程通信 ...

两个子组件之间的传值

举例：将A的drawerStart数值传递给B,来决定B的某个样式是否显示,并且点击 @click="changerDrawerStart"会改变 drawerStart的数值（这里可以使用监听watch，监听drawerStart的改变），通过$emit方法来实现传参的方式

思路：如果两个子组件在同一个父组件上，可以将父组件作为一个桥梁(用一个中间值)，中间商，先将决定性元素的子组件A的值先传给父组件，再通过父组件传给另外一个子组件B

具体步骤如下：

两个子组件之间的传值相关推荐

最新文章

热门文章