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>

vue阻止事件冒泡和默认行为

vue传递事件对象$event

@click="fun(12,$event)"