Vue父子组建的简单通信之控制开关Switch的实现


Posted in Javascript onJune 04, 2018

Vue在目前是很好的框架,第一次使用Vue开发项目,刚开始的时候在一个控制开关的组件都花费了很久的时间,问题解决了,把自己的一些小问题给记录下来,方便以后看及帮助像我这样的初级萌新解决遇到的相同问题。

问题: 父组件传入值到子组件,子组件修改之后怎样传回到父组件 

父组件:内部首先要有三步

1、父组件中引用子组件

2、父组件中注册子组件

3、在子组件上绑定传值

父组件

<template> 
<div class="hello">  
<ul>   
<li @click="changeFlag">点击开关----------------父组件默认为{{flag}}</li>  
</ul>  
<v-child :childFlag='flag' @parentChangeFlag='parentChangeFlag'></v-child> 
//第三部 
</div>
</template>
<script>
import child from '子组件地址' //第一步
data(){
  return{
    flag:false  }},
components:{
   'v-child': child  //第二步
}
</script>

在第三步骤里,绑定了一个childFlag传给子组件,其值为flag

子组件

< template > 
<div class = "hello" >
 <ul > 
<li@click = "parentChangeFlag" > 显示 {
  {
    childFlag
  }
}---子元素: {
  {
    flag2
  }
} 
< /li>   
 <li @click="parentChangeFlag" v-show="childFlag"><img src="./images / ios_switch_off.png " alt="">
</li>   
<li @click="parentChangeFlag " v-show=" ! childFlag "><img src=". / images / ios_switch_on.png " alt=""></li>  
</ul> 
</div>
</template>
< script > export
default {
    props:
    {
      childFlag:
      {
        type:
        Boolean,
      default:
        true
      }
    },
    data() {
      return {
        flag2: this.childFlag
      };
    },
    watch: {
      childFlag(flag2) {
        this.flag2 = this.childFla
      }
    },methods: { // 子组件传值给父组件  parentChangeFlag(){   this.flag2 = !this.flag2   this.$emit('parentChangeFlag',this.flag2)  } }};</script>

在父组件里,传了一个childFlag下来,我们要在子组件里去接收,方式用props,具体的可以看官方文档, 创建接收之后呢,我们需要把传进来的值绑定给我们子组件的data值即(flag2),完成这一步的话,我们就完成了父组件往子组件进行传值。

上面只是完成了父传子,下面讲述怎么子传父

子组件所需做的事情:

首先,我们需要在子组件里进行改变其状态值,这样我们就创建了一个parentChangeFlag点击事件,进而改变当前的子元素的(flag2)值;

其次,改变完当前的值,我们就要把子元素的状态值给传回父组件,这样就用到了$emit方法,this.$emit('function',Value);   function指父组件里监听子元素点击事件的函数;Value就代表你需要传回父元素的值。

父组件所需做的事情:

在父组件中,创建一个监听子元素改变data值的函数(即@parentChangeFlag='parentChangeFlag')

methods: {
  changeFlag() {
    //父组建点击改变元素传值给子组件  
    this.flag = !this.flag
  },
  parentChangeFlag: function(flag2) {
    //父组件监听子组件点击的函数 flag2为子组件传进来的值,把值赋给当前元素,就实现了父子之间的通信   
    console.log(flag2) this.flag = flag2
  }
}

当你完成父子组件各自所需要的工作时候,就恭喜你了,已经完成了Switch的效果,效果图如下

Vue父子组建的简单通信之控制开关Switch的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
广告切换效果(缓动切换)
May 27 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
js函数排序的实例代码
Jul 01 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
AudioContext 实现音频可视化(web技术分享)
Feb 24 Javascript
深入浅析JS中的严格模式
Jun 04 #Javascript
详解如何在你的Vue项目配置vux
Jun 04 #Javascript
详解vue-loader在项目中是如何配置的
Jun 04 #Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 #Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 #Javascript
vue之将echart封装为组件
Jun 02 #Javascript
React学习笔记之高阶组件应用
Jun 02 #Javascript
You might like
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
第十三节 对象串行化 [13]
2006/10/09 PHP
php 删除记录实现代码
2009/03/12 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
深入理解Django的自定义过滤器
2017/10/17 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
会计助理岗位职责
2014/02/17 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
房屋授权委托书范本
2014/10/07 职场文书
仰望星空观后感
2015/06/10 职场文书
广播体操比赛主持词
2015/06/29 职场文书
学习计划是什么
2019/04/30 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python