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 回傳 Promise
resolve(' ')						
}

子畫面

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 href
router-link :to="{ name: 'introduce' }"  	  動態模擬 a href

this.$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() 允許至導向的頁面
 else									meta 中有 requiresAuth 需要驗證
next();
})

用在某些頁面需要管理層瀏覽 , 經過驗證通過才能瀏覽

  {
       path: 'products',						在路由中放置 meta 這行就可以驗證
       name: 'Products',
       component: Products,
       meta: { requiresAuth: true }				
  }