1. 程式人生 > >Vue.js2.0中子元件修改父元件傳遞過來的props

Vue.js2.0中子元件修改父元件傳遞過來的props

如果非得需要修改傳入的prop為物件的屬性,又不想破壞原物件,可以深拷貝這個物件,ES6提供的Object.assign({},prop)的返回值就是一個全新的物件,操作這個新物件不會影響舊物件,如果不用ES5就自己遞迴實現拷貝器。

程式碼
1:給computed屬性設定get和set方法,並利用Object.assign()深度克隆物件可以完美解決修改props傳值問題

computed:{
      dialogFormVisible:{
        get:function(){
          return this.addData=Object.assign({},this
.dialogEditOrAddData) }, set:function(newValue){ return this.addData=newValue } } },

2:建議如果要修改props傳入的值,用watch可以多次修改,watch監聽物件得用深度監聽

watch:{
      dialogEditOrAddData:{//dialogEditOrAddData得在data中宣告
        handler(oldVal,newVal){
          this.dialogFormVisible=newVal
        
}, deep:true } },

3:computed修改的值雖然get時是深度克隆物件,但是set時還是會修改父元件的值,所以如果是子元件修改後的值和父元件設定方法的值一致,第二次computed就不會觸發啦

相關推薦

Vue.js2.0中子元件修改元件傳遞過來props

如果非得需要修改傳入的prop為物件的屬性,又不想破壞原物件,可以深拷貝這個物件,ES6提供的Object.assign({},prop)的返回值就是一個全新的物件,操作這個新物件不會影響舊物件,如果不用ES5就自己遞迴實現拷貝器。 程式碼 1:給compu

vue元件修改元件的三種方法

       一直使用$emit觸發父元件的事件方法來實現改變父元件的值,導致把其他方法都給忘了。特別來整理下,加深下印象吧。 1. $emit('event', val)  最常用的一種方法,父元件通過v-on繫結一個事件,在事件中修改自己的值,子元件通過$emit觸發

vue2中子元件修改元件傳入的prop,並向元件$emit一個廣播事件

1、在vue中:        prop 是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。      

通過子元件修改元件內的值

1.先在components下建立一個新的vue檔案,新增一些基本的配置。 2.在父元件中引用這個新建立的vue並註冊 import SelectItem from "./SelectItem" export default{ components:{SelectItem}

React Native 子元件修改元件的State

React Native 子元件傳遞State給父元件 一.原理 React本身是單向資料流,父元件可以傳遞props給子元件。 那麼假如要實現React / ReactNative 中父子元件通訊間的雙向資料流,思路可以是在這樣: 父元件向子元件

vue.js2.0元件點選觸發子元件方法

<body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementT

Vue中子元件呼叫元件的方法

Vue中子元件呼叫父元件的方法 相關Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

Vue2.0中子元件元件傳遞資料的方法,以完整demo演示

子元件child.vue原始碼:<template> <div class="child"> <button @click="sendData">點擊向父元件傳資料</button> </div> &

vue中子元件觸發元件的方法

方法一: 子元件: `<template> <button @click="submit">提交</button> </templa

vue中子元件元件傳遞引數(通訊)

vue構建專案時,在元件內部引用了子元件,子元件的資料更新或者狀態更新,需要向父級元件傳遞引數,在傳遞上如下進行定義:子元件中,在需要向父級元件傳遞引數的方法中,使用emit傳遞引數this.$emit('loadsuc', true);父元件中,v-on:loadsuc 來

vue高階屬性 provide/inject,元件向子元件元件的子元件的子元件...傳遞資料

官網說明:provide 和 inject 主要為高階外掛/元件庫提供用例。並不推薦直接用於應用程式程式碼中 以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。 provide 選項應該是一個物件

Vue元件呼叫元件的方法

第一步: 父元件在子元件上註冊方法 <customer-Avatar ref="customerAvatar" @customerchangeflag='customerchangeflag'></customer-Avatar> 第二步 : 子元件裡設定何時呼叫

Vue.js子元件元件通訊

一、場景描述: 曾經有個電商專案,其中有個“老帶新”模組,而且該模組新增的入口很多,但是新增後展示效果還不一樣,當時就考慮將新增的元件單獨拿出來,其實就是一個子元件向父組同步資料的過程。 當然,背景不重要了,關鍵是看實現的方式。 二、場景展示效果 (PS:展示效果請忽略美感)

vue 元件呼叫子元件的方法,子元件呼叫元件方法

首先看程式碼: 1、父元件: <template> <div> <div v-if="!userShow"> 父元件內容區 <el-button @click="lookUserInfo(scope.row)">&nb

vue元件更新元件狀態 使用sync

通過sync修飾符,來實現子元件更新父元件狀態,是目前寫法上最方便的語法糖了。下面舉個例子 1、首先父元件宣告狀態active,並寫一個子元件 <compo :foo.sync="active"&

Vue筆記——子元件元件傳遞資料

Vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。 子元件向父元件出傳遞資料,使用自定義事件的方式。 父元件向子元件傳遞資料,使用props屬性的方式。 一、在子元件中自定義事件 我們可以從子元件中想父元件中傳遞多個數據,在子

React中子元件元件之間傳值

最近公司的專案在用react,所以才開始接觸react,react和vue一樣,都是元件化的框架,那麼子元件和父元件之間怎麼傳值呢? 父元件向子元件傳值 ,父元件通過屬性的形式向子元件傳遞引數,子元件

vue 元件呼叫子元件方法和子元件呼叫元件方法

子元件: methods:{ //一開始載入基礎資訊資料 _basicInfo(){ let self = this; self.titleExplain=[];

vue元件元件與子元件之間通訊

vue元件,元件是一個可複用的功能模組,即將具有相同功能的模組抽取成一個元件,在需要的地方引用即可,這體現了程式碼封裝的思想,下面看一下元件是如何實現: // 定義一個名為 button-counter 的新元件 Vue.component('button-counter',

vue 元件元件取值並傳值給子元件

父頁面進入一個元件之後給子賦了值,這個子的頁面的資料傳給子子 解決方案:子取到父的值後子的watch 裡使用 this.$root.xx 接收一下資料然後子子在created裡取出this.$ro