vue2.0props数据传递

每天都要进步一点点 每天都要进步一点点     2022-09-21     365

关键词:

vue2.0 禁止 子组件修改父组件数据

在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据

 

在Vue2.0中,实现组件属性的双向绑定方式

1. 在组件内的data对象中创建一个props属性的副本

 因为result不可写,所以需要在data中创建一个副本myResult变量,初始值为props属性result的值,同时在组件内所有需要调用props的地方调用这个data对象myResult

Vue.component("switchbtn", {
    template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
    props: ["result"],
    data: function () {
        return {
            myResult: this.result//data中新增字段
        };
    },
    ......
});

 

2. 创建针对props属性的watch来同步组件外对props的修改

此时在组件外(父组件)修改了组件的props,会同步到组件内对应的props上,但是不会同步到你刚刚在data对象中创建的那个副本上,所以需要再创建一个针对props属性result的watch(监听),当props修改后对应data中的副本myResult也要同步数据。

Vue.component("switchbtn", {
    template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
    props: ["result"],
    data: function () {
        return {
            myResult: this.result
        };
    },
    watch: {
        result(val) {
            this.myResult = val;//新增result的watch,监听变更并同步到myResult上
        }
    },
    ......

 

3. 创建针对props副本的watch,通知到组件外

此时在组件内修改了props的副本myResult,组件外不知道组件内的props状态,所以需要再创建一个针对props副本myResult,即对应data属性的watch
在组件内向外层(父组件)发送通知,通知组件内属性变更,然后由外层(父组件)自己来变更他的数据

 

最终全部代码:

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
   		<switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
   		<input type="button" value="change" @click="change">
	</div>

	<script> 
	    Vue.component("switchbtn", {
	        template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
	        props: ["result"],
	        data: function () {
	            return {
	                myResult: this.result//第一步:建props属性result的副本--myResult
	            };
	        },
	        watch: {
	            result(val) {
	                this.myResult = val;//第二步:监听外部对props属性result的变更,并同步到组件内的data属性myResult中
	            },
	            myResult(val){
	                this.$emit("on-result-change",val);//第三步:组件内对myResult变更后向外部发送事件通知
	            }
	        },
	        methods: {
	            change() {
	                this.myResult = !this.myResult;
	            }
	        }
	    });

	    new Vue({
	        el: "#app",
	        data: {
	            result: true
	        },
	        methods: {
	            change() {
	                this.result = !this.result;
	            },
	            onResultChange(val){
	                this.result=val;//第四步:外层调用组件方注册变更方法,将组件内的数据变更,同步到组件外的数据状态中
	            }
	        }
	    });
	</script>
</body>
</html>

 

至此,实现了组件内数据与组件外的数据的双向绑定,组件内外数据的同步。最后归结为一句话就是:组件内部自己变了告诉外部,外部决定要不要变

.

 

vue父子组件传递数据

单向数据流: 数据从父级组件传递给子组件,只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。解决方法:可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 //用data来解... 查看详情

flutterstatefulwidget传递数据,多级控件传递数据(代码片段)

父类传递给子类可以通过构造方法。那么子类给父类呢?答案也是构造方法直接传递VoidCallback进来这个VoidCallback是通过查看onPress类型得到的import'package:flutter/material.dart';classStateManagementDemo2extendsStatefulWidget@override_State 查看详情

fragment的数据传递

fragment之间的数据传递 之前在实现activity之间基于fragment的activity之间的数据传递,现在要实现同一个activity间托管的两个fragment的数据间的传递。我们要实现这两个数据的传递需要新建一个方法,将其作为argument传给fragment。1.... 查看详情

androidintent传递数据时,哪些类型的数据可以被传递。

参考技术A基本类型可以传的,还有类是可以的,不过要继承Serializable这个接口 参考技术B1.简单或基本数据类型2.传递一个Bundle3.传递Serializable对象4.Parcelable对象5.Intent 参考技术C一楼正解 参考技术D有时间问,不如去看下api。 查看详情

引用数据类型

Java中的引用数据类型有三种,分别是:1、类类型2、数组3、接口Java中参数传递的问题:基本数据类型传递值、引用数据类型传递值。基本数据类型传递值是不能改变原值的。因为基本数据类型传递值会随着线程执行完毕时,将... 查看详情

在Ionic 2页面之间传递数据,传递的数据是未定义的

】在Ionic2页面之间传递数据,传递的数据是未定义的【英文标题】:PassingdatabetweenIonic2pages,datapassedisundefined【发布时间】:2018-04-2300:29:14【问题描述】:我正在使用navParams将数据从一个页面传递到另一个页面。数据从我的服务器... 查看详情

activity之间数据传递(简单传递,数据包bundle)

一,简单传递(简单的字符串)第一个activity通过putExtra()将字符串传入i1protectedvoidonCreate(BundlesavedInstanceState){2super.onCreate(savedInstanceState);3setContentView(R.layout.activity_main);4findViewById(R.id.btnStartAty) 查看详情

转载:soapui之接口数据传递

SoapUI之接口数据传递(TestCase、TestSuite传递)SoapUI之接口数据传递(step传递)SoapUI+Groovy做接口自动化测试SoapUI中使用ConditionalGotoTestStep摘要:HowtouseConditionalGotoTestStepinsteadofGroovyScriptBackground:在SoapUI的TestStep中,GroovyS 查看详情

fragment互相间的数据传递

fragment之间的数据传递 之前在实现activity之间基于fragment的activity之间的数据传递,现在要实现同一个activity间托管的两个fragment的数据间的传递。我们要实现这两个数据的传递需要新建一个方法,将其作为argument传给fragment。&n... 查看详情

九java基础之参数传递(值传递)

一、值传递/*程序在执行过程中,参数传递问题:1.传递数据是基本数据类型2.传递数据是引用数据类型*/1.以下程序是传递基本数据类型publicclassClassTest04{publicstaticvoidm1(inti){i++;System.out.println("m1---->"+i);//11}//入口publicstaticvoidmain(S... 查看详情

基本数据类型和引用数据类型作为参数传递的区别

/*程序在执行过程中,参数的传递问题1.传递的数据是基本数据类型2.传递的数据是引用数据类型以下程序传递基本数据类型*/publicclassOOTest04{publicstaticvoidmain(String[]args){//局部变量inti=10;//调用m1(i);System.out.println("main--->"+i);//10}publ... 查看详情

基本数据类型的值传递和引用数据类型的引用传递day06

ValueTest1.javapackagecom.sxt.valuetest;/**基本数据类型的传递:传递的是值得副本*/publicclassValueTest1{publicstaticvoidmain(String[]args){intnum=10;System.out.println("方法调用前:"+num);//10changeValue(num);System.out.print 查看详情

一对多核心数据关系数据传递

】一对多核心数据关系数据传递【英文标题】:OnetoManyCoreDataRelationshipDataPassing【发布时间】:2013-08-2202:39:01【问题描述】:目前正在处理核心数据,以下是我的数据模型:WorkoutType(OnetoManyworkoutswithWorkoutSet)WorkoutSet(OnetoManydayswithWo... 查看详情

将数据传递到 UITableView

】将数据传递到UITableView【英文标题】:PassingdataintoUITableView【发布时间】:2020-04-1020:23:17【问题描述】:我是swift新手,一直在尝试在视图控制器之间传递数据。我一直在尝试将数据从视图控制器传递到UITableViewCell,但是一旦运... 查看详情

fragment之间的数据传递

  之前在实现activity之间基于fragment的activity之间的数据传递,现在要实现同一个activity间托管的两个fragment的数据间的传递。我们要实现这两个数据的传递需要新建一个方法,将其作为argument传给fragment。 1.DatePickerFragmen... 查看详情

以编程方式快速传递数据的问题

】以编程方式快速传递数据的问题【英文标题】:IssueWithPassingDataProgrammaticallySwift【发布时间】:2017-12-2920:13:32【问题描述】:我无法以编程方式将数据从一个UICollectionViewController传递到另一个UICollectionViewController。目前我的设置... 查看详情

如何传递图像数据?

】如何传递图像数据?【英文标题】:Howtopassimagedata?【发布时间】:2014-12-0719:32:25【问题描述】:我目前正在尝试将图像数据从一个导航控制器上的UIImageView传递到另一个导航控制器的UIImage视图。基本上,我有一个collectionviewcon... 查看详情

Xamarin MVVM 将数据传递到其他视图

】XamarinMVVM将数据传递到其他视图【英文标题】:XamarinMVVMpassingdatatootherview【发布时间】:2019-01-0303:25:11【问题描述】:我想将数据传递到另一个视图页面。到目前为止,我可以获得我需要传递的数据。我的问题是如何在MVVM中传... 查看详情