父子元件傳值

一、現在開發模式遇到的問題：

問題：現在vue的專案，開發模式有乙個大的缺陷

原生的vue專案的目錄如下

1.assets      //存放靜態檔案，

2.components //非頁面級元件
3.page //存放頁面姐元件
4.router // 存放 路由介面
5.index.html //進行控制根節點頁面顯示。

缺陷是什麼？

乙個元件需要三個檔案進行控制

建立乙個新的元件的時候還要注意 控制好class 值，避免多個元件中的class 值有衝突。

vue compontent("元件名稱"，配置)

進行配置的時候，都會重複（每乙個元件都需這個樣子做），

配置過程中要通過axios的配置進行獲得建立元件的內容。同時還要在 index.html中建立

乙個標籤,把樣式新增到hearde 標籤裡面。

（配置這兩個的原因是因為 如果不這個樣子寫的話，就要在index.html頁面中引入三個頁面

這個樣子就會讓 index.html頁面很難受。所以必須要這個樣子寫）

二、命名法：

1 1. pascal命名法：yuexiaoting

2 2.camel(駱駝)命名法： yuextingting
3 3.kebab-case /ki baeb/ 短橫線命名法 yue-xiao-ting

二、1、父子元件傳值 有三處命名櫃子規定：

第一：在子props中如果乙個鍵 是由兩個單詞組合而成的，命名規則要遵循駱駝命名法

在子的  html中  使用   的時候 和   props的使用方法一樣

第二：在父親使用的時候要和子props命名相對應，但是名稱必須是遵循短橫線命名法

第三 ：就是在檢視錯誤的時候，所有的元件，瀏覽器自動統稱為乙個名字，

這就會造成不容易查錯誤。所以

在配置的時候就要 宣告乙個 name屬性 name: 'pascal命名法：yuexiaoting'

二.2、為什麼要研究父子傳值問題：

不管是什麼開發語言，都要和後端開發人員要有聯絡。從而進行控制頁面操作。

所以要解決 傳值問題。

在開發過程中可能有些地方是重複使用的，這個樣子我們就可以把一些重複操作的封裝成乙個元件。

元件的含義一定要牢記： 就是把一堆 html **封裝起來，起乙個名字，反覆使用，簡單的直接拿那個生成的標籤使用

複雜的東西就需要進行傳參。

生成的標籤 只有 「vue」 才能讀懂的 「biao籤」 ，這個標籤名稱我們可以隨便一名字。

無論是 全域性註冊 還是 區域性註冊。

那麼父子元件要解決那些問題：

1.父親給子傳值  傳屬性  傳事件  在自己發明的標籤中能不能在標籤中間存放 html**。

2.子元件給 父親傳值

對比： 普通標籤 可以進行繫結事件   可以傳乙個屬性  可以進行傳值，可以在標籤內容進行傳輸內容

在div裡面傳內容

舉例解決問題：

這個案例 重要點：

傳值之後你希不希望 子進行改變

比如 購物車和詳情頁都有乙個數量加減

所以就給這個重複使用的數量加減建立 乙個元件

1.建立這個元件的名字為  mi-count   2.誰使用這個區域性元件 誰就是它的父元件。

2.建立區域性元件的時候要進行分析。比如父親需不需給子進行傳值，需不需要讓子元件關太多

分析之後： 父親需要給這個 封裝好的元件 傳 乙個count 值

一般情況 我們都認為需要把id也傳給子元件對不對，但是有些情況是不需要的

而且每乙個父親呼叫我的時候，每一次操作都會不一樣，

這個樣子就會讓我這個子元件有一定的

負擔。3.傳值以後 

1.你傳給我乙個加函式和乙個減函式事件 然後我去調

2.只要我進行加或者減 我就給你傳送乙個事件，然後你接受事件之後你想幹什麼就幹什麼。

所以父親在使用的時候就會知道我會傳送兩個事件。

建立乙個資料夾 mi-count

然後建立三個檔案

html頁面

12//

要取消預設行為3-
4//使用 props 中的值和使用data一樣。56
+7

在js 頁面

1

var micount = (function
()，18
//只有乙個的時候可以寫成這個樣子
19//
maxcount：number,
20maxcount:
25}，
26methods:,
36decreasehandler()41}
4243
44};
45//
這個就是把 html css 放在這個地方
46return vue.conponent("",function());
5152 }).

父親使用：

1  //這個是你希望 我這個子來進行修改

2如果子也傳過來乙個引數。 就寫乙個箭頭函式
3只要傳子，父本身不傳 就是事件物件45
67increasehandler(item.id,e)" @decrease ="decreasehandler(item.id)">
8

如果你不希望我修改的話，就不要 加  sync

js 頁面

1

//一定要加 ： 如果不加 ： 的話，就會傳的是乙個字串。2//
如果加：就會當成乙個js型別去接卸，解析為最後的屬性。
3 1.在父親的中就應該有乙個 methods :,
7decreasehandler(){}8}
910 2.在使用我的時候還要給我傳乙個值 那個值就是 count 
11所以在父親裡面還需要有乙個 
data()
15 3.通過分析需要傳給我乙個最大值，如果不傳給我乙個最大值，那麼就需要有乙個預設的最大值。
16我知道內部知道maxcount 的最小值是1 最大值的預設值是5， 如果父元件告訴我最大值，我就用父元件告訴我的。
1718
有的元件 可以直接拿到元件的名字就可以使用，有的元件就需要父子傳值操作。
19黃是購物車 需要發ajax 只能用不能改
20商品詳情不需要進行 加減真正操作。
21我給你乙個數,後期維護 我就不管了.
22這個sync就是我這個子可以改，如果不加的sync的話，就說明我這個子是不可以改的。
23要慎重使用，會亂
2425
data()

父子元件傳值

因為啊，今天在寫 的時候遇到坑，自己發現元件傳值有點不熟悉了，以前寫過，但是都是照著文件寫的。然後今天按照記憶寫，發現自己有點忘了。究其緣由，我覺的還是自己對於父子元件傳值的理解不夠深入。首先vue2.0規定了元件傳值是單向的，父元件傳值給子元件，方法是利用繫結屬性的方式，子元件通過props接受，...

父子元件傳值

父元件的data中定義值 用import引入子元件 在components中注入子元件 父元件對子元件呼叫 註冊 引用 import list from components common list.vue export default 註冊 hello 元件 components 在父元件中定義乙...

父子元件傳值

第一種 前提 在父元件中引入子元件，並且宣告標籤對 ps 這中方法只能當子元件中的 v if true 時才可以 父元件主動獲取子元件值或者方法 this.refs.屬性 this.refs.方法 子元件主動獲取父元件值或者方法 this.parent.資料 this.parent.方法 第二種 路...