Vue經常使用知識點記錄

---

##1、計算屬性

<template>
  <div>
    <input type="text" v-model="msg"><br>
    <p>computed: {{reverseMsg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return{
      msg: ''
    }
  },
  computed: {
    reverseMsg () {
      return this.msg.split('').reverse().join('');
    }
  }
}
</script>
複製代碼

##2、偵聽器

<script>
export default {
	data() {
		return {
			title: '',
			obj: {
				a: 1,
				b: 2
			}
		}
	},
	watch: {
		// 一、 普通監聽
		title (val, oldVal) {
			console.log(val, oldVal);
		},
		// 二、 深度監聽
		obj: {
			handler (val, oldVal) {
				console.log(val, oldVal);
			},
			deep: true, // 開啓深度檢測
			immediate: true // 開啓時 回調會在監聽開始以後，當即調用
		}
	}
}
</script>
複製代碼

##3、過濾器

<template>
  <div>
    <p>computed: {{date | formatDate }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return{
      date: Date.now();
    }
  },
  filters: {
    formatDate (val) {
      const date = new Date(val);

      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  }
}
</script>
複製代碼

##4、組件之間通訊

一、父組件向子組件傳值

// father.vue
<template>
	<div>
		<Child :title='title' />
	</div>
</template>
<script>
export default {
	data () {
		return {
			title: '父標題'
		}
	}
}
</script>
// child.vue
<template>
	<div>{{title}}</div>
</template>
<script>
export default {
	props: ['title']
}
</script>
複製代碼

二、子組件調用父組件的方法

// father.vue
<template>
	<div>
		<Child @fatherFun="fatherFun" />
	</div>
</template>
<script>
export default {
	data () {
		return {
			title: '父標題'
		}
	},
	methods: {
		fatherFun () {}
	}
}
</script>
// child.vue
<template>
	<div>
		<button @click="useFatherFun">調用父組件方法</button>
	</div>
</template>
<script>
export default {
	methods: {
		useFatherFun () {
			this.$emit('fatherFun');
		}
	}
}
</script>
複製代碼

####三、使用ref給子組件註冊引用信息

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from '@/views/Child';
export default {
  name: 'test',
  components: {
    Child
  },
  mounted () {
    console.log(this.$refs.child);
  }
}
</script>
<style lang="scss" scoped>

</style>
複製代碼

四、EventBus

// EvenBus.js
import Vue from 'vue';
export default new Vue();

// 註冊事件
import eventbus from './EventBus';
<script>
export default {
	created () {
		eventbus.$on('target', () => {
			
		});
	}
}
</script>
// 觸發事件
import eventbus from './EventBus';
<script>
export default {
	created () {
		eventbus.$emit('target');
	}
}
</script>
複製代碼

五、vuex 數據狀態管理

6、vue-router 路由

一、使用this.$router.push() 編程式導航：push、go

// params 傳值
this.$router.push({
	name: 'home',
	params: {
		id: 'params'
	}
})
// query傳值
this.$router.push({
	path: '/',
	query: {
		id: 'query'
	}
})
// 路由地址傳值
// 配置路由
{
	path: 'aaa/:id'
}
// 跳轉
this.$router.push({
	path: '/aaa/${id}'
})
複製代碼

二、使用router-link :to 聲明式導航

// params 傳值
<router-link :to="{name: 'home', params: {id:'params'}}">router-link傳值</router-link>
<router-link :to="{path: '/', query:{id: 'query'}}">router-link傳值</router-link>
<router-link :to="{path: '/about/123'}">路由地址傳值</router-link>
複製代碼

三、導航守衛

// 全局前置守衛
router.beforeEach((to, from, next) => {
	// ...
});

// 全局後置鉤子
router.afterEach((to, from) => {
	// ...
});

// 路由獨享守衛
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
});

// 組件內的守衛
cost Foo = {
	template: `...`,
	beforeRouteEnter (to, from, next) {
		// ...
	},
	beforeRouteUpdate (to, from, next) {
		// ...
	},
	beforeRouteLeave (to, from, next) {
		// ...
	}
}
複製代碼