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 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
在JavaScript中如何使用宏详解
May 06 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
杏林同学录(三)
2006/10/09 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
js禁止表单重复提交
2017/08/29 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python开发利器之ulipad的使用实践
2017/03/16 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
会计专业个人自我鉴定
2014/03/21 职场文书
团组织关系介绍信
2019/06/24 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android