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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vue+moment实现倒计时效果
Aug 26 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
vue解决跨域问题(推荐)
Nov 10 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
javascript实现简易聊天室
2019/07/12 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python使用pymysql小技巧
2017/06/04 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python tkinter label 更新方法
2018/10/11 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
上级检查欢迎词
2014/01/18 职场文书
实习单位鉴定评语
2014/04/26 职场文书
先进典型事迹材料
2014/12/29 职场文书
绿色环保倡议书
2015/04/28 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书