vue元件傳值和路由 day04

1.父元件向子元件傳值

注意：先使用props定義一下才能使用，props中的資料，都是唯讀的，無法重新賦值

2. 使用v-bind或簡化指令，將資料傳遞到子元件中：

2.子元件向父元件傳值

原理：父元件將方法的引用，傳遞到子元件內部，子元件在內部呼叫父元件傳遞過來的方法，同時把要傳送給父元件的資料，在呼叫方法的時候當作引數傳遞進去；

2、路由

**後端路由：**對於普通的**，所有的超連結都是url位址，所有的url位址都對應伺服器上對應的資源；

**前端路由：**對於單頁面應用程式來說，主要通過url中的hash(#號)來實現不同頁面之間的切換，同時，hash有乙個特點：http請求中不會包含hash相關的內容；所以，單頁面程式中的頁面跳轉主要用hash實現；

在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

1.路由基本使用

1.1先引入vue-router元件庫，注意vue包先引入，vue-router是依賴於vue的。

vm例項中，使用 router 屬性來使用路由規則

var routerobj = new vuerouter(,,]

})

路由物件中引數解釋：

routes——路由匹配規則

path——表示監聽 哪個路由鏈結位址

component——如果 路由是前面匹配到的 path ，則展示 component 屬性對應的那個元件

注意： component 的屬性值，必須是乙個 元件的模板物件， 不能是 元件的引用名稱

redirect——重定向

var login = 

var register=

註冊2.路由的巢狀

使用children實現路由的巢狀

//建立乙個路由物件

//在new路由物件的時候可以為建構函式，傳遞乙個配置物件
var router= new vuerouter(,]},
]})

使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶/，否則永遠以根路徑開始請求，這樣不方便我們使用者去理解url位址

登入註冊

vue 元件傳值 頁面（路由）傳值

一 元件傳值 1 父元件 子元件 屬性傳值 在父元件頁面引入子元件並在，兒子身上繫結屬性 list list 父元件頁面data中填寫要傳遞的值 list a,b,c 子元件頁面接受 props 子元件頁面就可以拿到值了 2 子元件 父元件 事件傳值 子元件中定義事件 showmenu 通過 emi...

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件，從業務上看，該父元件有可能對子元件有個性化需求，為了體現元件的靈活多變，可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值，具體通過pro...

vue 元件傳值 父子元件傳值，兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數，如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...