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 相关文章推荐
模拟select的代码
Oct 19 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
vue实现简单loading进度条
Jun 06 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
React自定义hook的方法
Jun 25 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
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
php curl常用的5个经典例子
2017/01/20 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js 走马灯简单实例
2013/11/21 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python模块WSGI使用详解
2018/02/02 Python
使用python存储网页上的图片实例
2018/05/22 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
大客户经理岗位职责
2015/04/09 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python