Vue cli 使用

vue create 专案名称     新增专案

Props(父 => 子)
父画面

<ProductCard :product="product"/>:子画面接收的名称 = "父画面的名称"

子画面

props: {    子画面接受父画面传过来的值     product: {    传过来值的型态     type: Object,预设值     default: () => {}     }}

watch: {    当父画面变动时子画面值也跟着变动     product() {用 watch 来监听变化this.aProduct = { ...this.product };props 的值 使用方式跟 data 一样    }}

Emit(子 => 父)
父画面

<ProductCard @addCart="addCart" />    @子画面传递的名称 = "父画面接收的名称"

子画面

this.$emit('addCart', this.id);   子画面触发事件到父画面 (事件名称,参数)

Promise

new Promise((resolve  ,reject) =>   创建 Promise 实体       …   Promise 会等事情做完  resolve(‘1’)                         回传 resolve >> success  reject(‘2’)   回传 reject >> fail);

Emit 搭配 Promise
父画面

名称(resolve){  触发事件做完后    …  将 resolve 回传 Promiseresolve(' ')}

子画面

new Promise(resolve=> this.$emit(名称, resolve));创建 Promise 实体 让 emit 将resolve 传到父画面

Async Await

await this.editProduct(api);可以等待有异步的方法this.$emit('getProducts', resolve));不能使用在 emit 因为是单向将资料传递给父画面 

router

router-view              显示画面的地方router-view name ="名称"      用 name 区别画面 router-link to = "/home"         模拟 a hrefrouter-link :to="{ name: 'introduce' }"    动态模拟 a hrefthis.$router.push('/introduce');  转至该网址this.$router.push({ name: 'Introduce' });  使用物件方式转至该网址this.$router.replace('/introduce');      跟 push 一样 但不会有纪录this.$router.back();      上一页 this.$router.forward();          下一页this.$router.go(n);          n = 1 下一页 n = -1 上一页

new VueRouter({              name 命名路由  routes: [          path  网址路径    {          component 使用单一元件      name: 'introduce',  components 使用多个元件      path: '/introduce',  ＊default 没有使用 name 的 routerView      component: Introduce,      name = child 使用 Child1元件components: {               ＊children 的路径前面不能加 /    default: Introduce,       redirect 导向该网址  通常搭配 path: " * "     child: Child1           },          children: [    {                path: 'child1',                component: Child1,        }          ],          redirect: '/products'      ]    })

routes 所有属性
导航守卫

router.beforeEach((to, from, next) => {to 要导向的页面 if ( to.meta.requiresAuth)from 原本的页面…next() 允许至导向的页面 elsemeta 中有 requiresAuth 需要验证next();})

用在某些页面需要管理层浏览 , 经过验证通过才能浏览

  {       path: 'products',在路由中放置 meta 这行就可以验证       name: 'Products',       component: Products,       meta: { requiresAuth: true }  }