Vue元件的component中data屬性function傳物件和不穿的物件的區別(不同效果)

阿新 • • 發佈：2018-12-06

話不多說上程式碼測試：

定義一個全域性元件，繫結msg

我們首先看如果把data的值外傳不在元件裡面建立的效果

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>

  <template id="temp">
    <div 
>
        <input type="button" value="加一" @click='increment'>
        <h3>{{count}}</h3>
    </div>
  </template>

  <script>
    var dataObj={count:0}
    Vue.component('counter',{
      template:'#temp',
      data:()=>{
      	return dataObj
      },
      methods: 
{
        increment() {
          this.count++
        }
      }
    })

    var vm=new Vue({
      el:'#app',
      data:{},
      methods:{}
    });
  </script>
</body>

在這裡插入圖片描述

現在把dataObj註釋， return {count:0}

//var dataObj={count:0}
    Vue.component('counter',{
      template:'#temp', 

      data:()=>{
        return {count:0}
      },
      methods:{
        increment() {
          this.count++
        }
      }
    })

在這裡插入圖片描述

總結：

不難看出，這裡的關鍵點就在於 return {} 這個地方如果是作用域外傳入物件的話，上面三個元件的click方法都是處理的這個外部物件裡面的count，所以他們作用於同樣一個變數，但是如果是 return {count : 0}的話是寫在template 內部的，所以每當你在page上渲染一個元件就會響應的建立一個count ，所以他們互不干預，在事件使用中我們可以根據這個小小的點實現不同需求的功能而省去多餘的程式碼

Vue元件的component中data屬性function傳物件和不穿的物件的區別(不同效果)

話不多說上程式碼測試：定義一個全域性元件，繫結msg 我們首先看如果把data的值外傳不在元件裡面建立的效果 <body> <div id="app"> <counter></counter>

mybatis使用@param("xxx")註解傳參和不使用的區別

color class myba rdo rec delete ger con inter public interface SystemParameterMapper { int deleteByPrimaryKey(Integer id); int

Python中的可變物件和不可變物件

什麼是可變/不可變物件不可變物件，該物件所指向的記憶體中的值不能被改變。當改變某個變數時候，由於其所指的值不能被改變，相當於把原來的值複製一份後再改變，這會開闢一個新的地址，變數再指向這個新的地址。可變物件，該物件所指向的記憶體中的值可以被改變。變數（準確的說是引用）改變後，實際上是其所指的值直接發生

Python中可變物件和不可變物件

之前寫了FPGrowth的程式碼，寫得非常噁心，覺得和C語言、C++的工程檔案很不相同。其中就有關於傳引用、傳值的疑問。截一段Leetcode的程式碼這題好像是Leetcode 93附近的一道獲得二叉樹最大深度的題目。我使用了dfs，本來以為p

bootstrapValidator驗證的remote中data屬性裏獲取select一直是默認值

rand 版本做了輸入框初始化選中 sele clas func 1 budgetEditionNo:{ 2 message:‘版本號輸入不正確‘ , 3 validators:

vue元件樣式新增scoped屬性之後，無法被父元件修改。或者無法在本元件修改element UI樣式

在vue開發中，需要使用scoped屬性避免樣式的全域性干擾，但是這樣在父元件中是無法被修改的，不僅如此如果專案中用了UI框架比如element Ui,這個時候在本元件也無法修改樣式，因為權重問題。但是想要修改還是有方法的： 1. 在不去掉scoped的情況下，在全域性樣式中覆蓋，這種解法，有弊端，可能會汙

vue元件命名中的坑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

vue 元件使用中的一些細節點

細節一基礎例子執行結果: 以上大家都懂，這邊就不多說，回到程式碼裡，有時候我們需要 tbody 裡面每一行是一個子元件，那我們程式碼可以怎麼寫呢？我們可以這樣寫，定義一個全域性元件，如下：然後我們在 body 裡面可以這麼呼叫: 前端全棧學習交流圈：8661

Vue元件通訊（props）父傳子

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="vi

VUE元件component註冊後獲取不到

首先我註冊一個元件 Vue.component("item-groceryText",{ template:"<p>這是一個元件</p>" }); <item-groceryText></item-groceryText>

Python函數中多類型傳值和冗余參數及函數的遞歸調用

rgb {} rgs fun mini eight 分享圖片 not strong 1.多類型傳值和冗余參數多類型傳值： def fun(x,y): return x +y print fun(3,5) 8 print fun(*t)

vue 中router.go、router.push和router.replace的區別

記錄 out 整數添加 history 它的 lac 的區別意思 router.go(n) 這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，類似 window.history.go(n) router.push(location) 想要

MySql儲存過程中傳參和不傳參以及java中呼叫程式碼

資料庫表結構 1.mysql不傳參寫儲存過程 create procedure product() -- product為儲存過程名稱 begin select * from book; end 呼叫此儲存過程為 CALL product

Vue- 動態元素屬性及v-bind和v-model的區別

屬性 Mustache (雙大括號寫法)不能在 HTML 屬性中使用，應使用 v-bind 指令： <div v-bind:id="dynamicId"></div> 這對布林值的屬性也有效 —— 如果條件被求值為 false 的話該屬性

（GIS視覺化）ArcGis中屬性連線、關聯和空間連線的區別

1.連線(join) 1.1概念為將不同型別的資訊放在一起，通常將多個數據表組合在一起，或者稱為連線在一起。公共欄位、暫時的關係。源表：包含要追加資訊的表。目標表：接收追加資訊的表。 1.2對應關係目標表對源表：一對一

測試在vue下點選事件傳參和不傳參的區別

<div id = 'app'> <p><button @click = 'test_click1'>{{btn_text1}}</button></p> <

java中length屬性，length()方法和size()的方法的區別

1.length屬性是針對Java中的陣列來說的，要求陣列的長度可以用其length屬性； 2.length()方法是針對字串來說的，要求一個字串的長度就要用到它的length()方法； 3.java中的size()方法是針對泛型集合說的,如果想看這個泛型有多少個元素,就呼叫此方法來檢視! 這個例子來演示這

Android中使用HttpPost上傳圖片和資料

1、首先需要對應的JAR包匯入 httpmime-4.1.1.jar package url; import io.IoStreamUtil; import java.io.File; import java.io.IOException; imp

HTML中的屬性 1.外間距和2.內間距（詳解）（表格屬性）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外間距</title&g

列舉物件中的屬性（for....in 方法遍歷物件中的屬性名+屬性值）

<!DOCTYPE html> <html> <head> <m

Vue元件的component中data屬性function傳物件和不穿的物件的區別(不同效果)

總結：

相關推薦