## Calculate attributes

<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>
Copy the code

# 2. Listeners

<script>
export default {
	data() {
		return {
			title: ' ', obj: {a: 1, b: 2}}}, watch: {// 1, common listener title (val, oldVal) {console.log(val, oldVal); }, // obj: {handler (val, oldVal) {console.log(val, oldVal); }, deep:true, // Enable the depth detection immediate:true}}} </script>Copy the code

## 3 filters

<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>
Copy the code

4. Communication between components

1. The parent component passes values to the child component

// father.vue
<template>
	<div>
		<Child :title='title' />
	</div>
</template>
<script>
export default {
	data () {
		return {
			title: 'Parent title'
		}
	}
}
</script>
// child.vue
<template>
	<div>{{title}}</div>
</template>
<script>
export default {
	props: ['title']
}
</script>
Copy the code

2. The child component calls the parent component’s methods

// father.vue
<template>
	<div>
		<Child @fatherFun="fatherFun" />
	</div>
</template>
<script>
export default {
	data () {
		return {
			title: 'Parent title'
		}
	},
	methods: {
		fatherFun () {}
	}
}
</script>
// child.vue
<template>
	<div>
		<button @click="useFatherFun"</button> </div> </template> <script>export default {
	methods: {
		useFatherFun () {
			this.$emit('fatherFun');
		}
	}
}
</script>
Copy the code

####3. Use ref to register reference information for child components

<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>
Copy the code

4, EventBus

// EvenBus.js
import Vue from 'vue';
exportdefault new Vue(); // Register the event import eventBus from'./EventBus';
<script>
export default {
	created () {
		eventbus.$on('target', () => {}); }} </script> // trigger event import eventbus from'./EventBus';
<script>
export default {
	created () {
		eventbus.$emit('target');
	}
}
</script>
Copy the code

5. Vuex data state management

Vue -router route

1, Use this.$router.push() to programmatically navigate to push and go

$router. Push ({name: 'home', params: {id: 'params'}}) // Query: this.$router. Push ({path: {id: 'params'}}) '/', query: {id: 'query'}}) / / / / routing address the value configured routing {path: 'aaa / : id} / / jump this. $router. Push ({path:'/aaa / ${id}})Copy the code

Use router-link :to declarative navigation

<router-link :to="{name: 'home', params: {id: 'params'}} "> the router - the link by value < / router - the link > < the router - link: to =" {path:'/', query: {id: 'query'}}">router-link </router-link> <router-link :to="{path: '/about/123'}"> Router-link </router-link>Copy the code

3. Navigation Guard

// Global front-guard
router.beforeEach((to, from, next) = > {
	// ...
});

// Global post-hook
router.afterEach((to, from) = > {
	// ...
});

// Route exclusive guard
const router = new VueRouter({
  routes: [{path: '/foo'.component: Foo,
      beforeEnter: (to, from, next) = > {
        // ...}}});// The guard inside the component
cost Foo = {
	template: `... `,
	beforeRouteEnter (to, from, next) {
		// ...
	},
	beforeRouteUpdate (to, from, next) {
		// ...
	},
	beforeRouteLeave (to, from, next) {
		// ...}}Copy the code