一.建立vue-cli腳手架
指令 npm install webpack -g
npm install vue-cli -g
vue init webpack vuetex1
npm install
npm run dev
npm run build 打包專案
二.路由跳轉頁面傳參
1routes: [2,
7,13}接收引數
17 path: '/he2/:user',
18 name: 'he2',
19component: he2
20},
21}接收引數
23//
he2頁面傳過來的tex引數,
24//
在he3頁面裡用}接收引數
25 path: '/he3/:tex',
26 name: 'he3',
27component: he3
28},29}
32//
33 path: '/params/:newsid/:newstitle',
34 name: 'params',
35component: params,
36//
路由鉤子函式
37 beforeenter: (to, from, next) =>43}
44 ]
二.元件的應用
1.全域性註冊元件
在main.js裡新增以下內容
vue.component("runoob", );/*eslint-disable no-new
*/new
vue()
自定義區域性元件
在要用得到的頁面裡註冊區域性元件,只供當前頁面使用
export default; },
components: }
', props: ["here"]
}}};
2.元件之間的通訊
用props從父元件向子元件傳值
14567
822
//children01.vue
}
}
用props從子元件向父元件傳值
14567
826
//children01.vue
向父元件傳值
用props兄弟元件間傳值,主要思想是children01先向parent傳值,然後parent再向children02傳值
//parent.vue
//children01.vue
}
}點選向父元件傳值,然後向children02元件傳值
//children02.vue
}
}
vue2 0父子元件傳值
在vue開發中,我們經常需要在子元件使用父元件的資料,父元件使用子元件的資料,其實vue提供了這兩個方法。1.子元件向父元件傳值,在父元件內宣告變數,子元件接受用props 例如.父元件 註冊元件後在元件標籤繫結你要傳的值。子元件 子元件用props接受。結果如圖所示 2.子元件向父元件傳值 先在子...
vue2 0元件傳值
props down emit up 嘿嘿 如果是第一次接觸vue2.0元件傳值的肯定很疑惑,這是什麼意思 大神總結的,我也就是拿來用用 down 指的是下的意思,即父元件向子元件傳值,用props up 指的是上的意思,即子元件想父元件傳值,用emit。1.子元件向父元件的傳值 child.vue...
Vue2 0 父子傳值 非父子元件傳值方式
一.父子元件通訊 1 父元件中如何整合子元件 1.1 定義子元件 1.2 在父元件匯入並且註冊子元件 1.3 在父元件的template中使用即可 2 父元件如何傳值給子元件 通過props 傳值方 父元件 接收方 子元件 props 3 子元件如何傳值給父元件 通過自定義事件 傳值方 子元件 th...