vue查漏補缺

$event 獲取當前觸發事件的元素

<button>@click="myFun($event)"</button>
myFun(event){
console.log(event.target)
}

路由傳參

route vs router

$router爲VueRouter實例，想要導航到不同URL，則使用$router.push方法
$route爲當前router跳轉對象裏面可以獲取name、path、query、params等

一. 配置路由格式: /router/:id

傳遞的方式: 在path後面跟上對應的值
傳遞後形成的路徑: /router/123, /router/abc

<router-link v-bind:to="'/user/'+userId"> user </router-link>
<p>{{ this.$route.params }}</p>

二.配置路由格式: /router, 也就是普通配置

傳遞的方式: 對象中使用query的key作爲傳遞方式
傳遞後形成的路徑: /router?id=123, /router?id=abc

<router-link v-bind:to="{ path: '/profile/',query: {name:'tadm',...} }"> profile </router-link>
<p>{{ this.$route.query }}</p>

export default {
	name: 'App',
	methods: {
		toProfile() {
			this.$router.push({
				path: '/profile/',
				query: { name:'tadm',... }
			})
		}
	}
}

組件間傳參

父傳子

子組件需要通過v-bind綁定指定數據給自己,同時在組件中通過props(properties-屬性)接收相應數據

<div id="app">
  <!--<cpn v-bind:cmovies="movies"></cpn>-->
  <!--<cpn cmovies="movies" cmessage="message"></cpn>-->
  //	不使用v-bind則不會將其識別爲變量而是直接將其當作字符串傳過去

  <cpn :cmessage="message" :cmovies="movies"></cpn>
</div>

<!-- 定義 cpn 組件模板 -->
<template id="cpn">
  <div>
    <ul>
      <li v-for="item in cmovies">{{ item }}</li>
    </ul>
    <h2>{{ cmessage }}</h2>
  </div>
</template>

//	定義 cpn 組件
const cpn = {
  template: '#cpn',
  // 	可以是一個數組
  // props: ['cmovies', 'cmessage'],
  // 也可以通過對象設置傳入以及設置更多默認參數
  props: {
    // 1.類型限制
    // cmovies: Array,
    // cmessage: String,

    // 2.提供一些默認值, 以及必傳值
    cmessage: {
      type: String,
      default: 'aaaaaaaa',
      required: true
    },
    // 類型是對象或者數組時, 默認值必須是一個函數
    cmovies: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return { }
  },
  methods: { }
}

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello tadm',
    movies: ['海王', '海賊王', '海爾兄弟']
  },
  //	註冊 cpn 組件
  components: {
  	//	'cpn': cpn
  	//	ES6 增強寫法
    cpn
  }
})

v-cloak

解決頁面加載閃動
v-cloak 可以解決這一問題，在 css 中加上

[v-cloak] { display: none; }
在 html 中的加載點加上 v-cloak，就可以解決這一問題

\<div id="app" v-cloak> {{msg}} \</div>

子組件向父組件傳參

子組件通過$emit()來發射事件以及參數,在父組件中通過@(v-on)來監聽傳過來的事件並進行相應處理(比如發送網絡請求)

<!--父組件模板-->
<div id="app">
	<!-- 默認把$emit('function',item)中的item傳給父組件,不會傳遞event(非瀏覽器對象自然不會產生event)-->
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子組件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" @click="btnClick(item)">
      {{ item.name }}
    </button>
  </div>
</template>

const cpn = {
	template: '#cpn',
	data() {
		return {
			categories: [
        {id: 'aaa', name: '熱門推薦'},
        {id: 'bbb', name: '手機數碼'},
        {id: 'ccc', name: '家用家電'},
        {id: 'ddd', name: '電腦辦公'},
      ]
		}
	},
	methods: {
		btnClick(item) {
			this.$emit('item-click',item)
		}
	}
}
const app = new Vue({
	el: '#app',
	data: { },
	components: {
		//	'cpn': cpn
		cpn
	}
	methods: {
		cpnClick(item) {
			console.log('cpnClick',item)
		}
	}
})

$event可以獲得傳遞過來的參數(自定義事件獲取的時參數,而不是事件處理對象)

//父
    <song-list @getSongName="songName=$event" ></song-list>

//子
           this.$emit('getSongName', '我愛你,再見')

組件間傳參

作用域插槽

注意默認插槽的縮寫語法不能和具名插槽混用，因爲它會導致作用域不明確

<div id="app">
	<cpn></cpn>
	//下面的text對應的具名插槽的name爲text,如果是沒有name的默認插槽,可以省略,(如果是有name的具名插槽則不能省略)myslotProps獲取的是插槽上所有的屬性
	<cpn v-slot:text="myslotProps"> 
		<span>{{ myslotProps.data.join(' - ') }}</span>
			<!-- <span>{{ myslotProps.my.join(' - ') }}</span> -->
	</cpn>
</div>

<template id="cpn">
  <div>
  //插槽上的屬性可以綁定多個,會打包成對象到myslotProps,
    <slot name="text" :data="pLanguages">
    <!-- <slot name="text" :data="pLanguages" :my="tadm"> -->
    <!-- <slot name="text" :data=[pLanguages,tadm]> -->
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>