父組件向子組件傳值
1.組件實(shí)例定義方式调煎,注意:一定要使用props屬性來(lái)定義父組件傳遞過(guò)來(lái)的數(shù)據(jù)
1.使用v-bind或簡(jiǎn)化指令,將數(shù)據(jù)傳遞到子組件中:
子組件向父組件傳值
1.原理:父組件將方法的引用己肮,傳遞到子組件內(nèi)部士袄,子組件在內(nèi)部調(diào)用父組件傳遞過(guò)來(lái)的方法,同時(shí)把要發(fā)送給父組件的數(shù)據(jù)谎僻,在調(diào)用方法的時(shí)候當(dāng)作參數(shù)傳遞進(jìn)去娄柳;
2.父組件將方法的引用傳遞給子組件,其中,getMsg是父組件中methods中定義的方法名稱,func是子組件調(diào)用傳遞過(guò)來(lái)方法時(shí)候的方法名稱
1.子組件內(nèi)部通過(guò)this.$emit('方法名', 要傳遞的數(shù)據(jù))方式艺演,來(lái)調(diào)用父組件中的方法钾恢,同時(shí)把數(shù)據(jù)傳遞給父組件使用
使用?this.$refs?來(lái)獲取元素和組件
什么是路由
對(duì)于普通的網(wǎng)站,所有的超鏈接都是URL地址舔糖,所有的URL地址都對(duì)應(yīng)服務(wù)器上對(duì)應(yīng)的資源;
對(duì)于單頁(yè)面應(yīng)用程序來(lái)說(shuō),主要通過(guò)URL中的hash(#號(hào))來(lái)實(shí)現(xiàn)不同頁(yè)面之間的切換蕉朵,同時(shí),hash有一個(gè)特點(diǎn):HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容阳掐;所以始衅,單頁(yè)面程序中的頁(yè)面跳轉(zhuǎn)主要用hash實(shí)現(xiàn);
在單頁(yè)面應(yīng)用程序中锚烦,這種通過(guò)hash改變來(lái)切換頁(yè)面的方式觅闽,稱作前端路由(區(qū)別于后端路由);
在 vue 中使用 vue-router
1.導(dǎo)入 vue-router 組件類庫(kù):
<!-- 1. 導(dǎo)入 vue-router 組件類庫(kù) -->
? <script src="./lib/vue-router-2.7.0.js"></script>
2.使用 router-link 組件來(lái)導(dǎo)航
<!-- 2. 使用 router-link 組件來(lái)導(dǎo)航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊(cè)</router-link>
3.使用 router-view 組件來(lái)顯示匹配到的組件
<!-- 3. 使用 router-view 組件來(lái)顯示匹配到的組件 -->
<router-view></router-view>
4.創(chuàng)建使用Vue.extend創(chuàng)建組件
// 4.1 使用 Vue.extend 來(lái)創(chuàng)建登錄組件
? ? var login = Vue.extend({
? ? ? template: '<h1>登錄組件</h1>'
? ? });
? ? // 4.2 使用 Vue.extend 來(lái)創(chuàng)建注冊(cè)組件
? ? var register = Vue.extend({
? ? ? template: '<h1>注冊(cè)組件</h1>'
? ? });
5.創(chuàng)建一個(gè)路由 router 實(shí)例涮俄,通過(guò) routers 屬性來(lái)定義路由匹配規(guī)則
// 5. 創(chuàng)建一個(gè)路由 router 實(shí)例蛉拙,通過(guò) routers 屬性來(lái)定義路由匹配規(guī)則
? ? var router = new VueRouter({
? ? ? routes: [
? ? ? ? { path: '/login', component: login },
? ? ? ? { path: '/register', component: register }
? ? ? ]
? ? });
6.使用 router 屬性來(lái)使用路由規(guī)則
// 6. 創(chuàng)建 Vue 實(shí)例,得到 ViewModel
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? router: router // 使用 router 屬性來(lái)使用路由規(guī)則
? ? });