How does V001-vuerouter pass the value
1. Configure
path:'/detail/:id' 调用: this.$router.push({ path:'/home/${id}' })
in the componentthis.$route.params.id
can be obtained.
[Topic recommendation]:2020 front-end vue interview questions summary (with answers)
2. Inrouter-link Pass parameters in the
tag.
You can also get it through:this.$route.params.id
The parameter passing method here is invisible parameter passing through router-link
3. Another method of params is to pass parameters through params and configure routing through name.
//路由处: { path:'/home', name:'Home', component:Home } 调用: this.$router.push({ name:'Home', params:{ id:id } })
Get:this.$route.params.id
4. Pass parameters through query, and the parameters will be displayed in the ?id=? after the url
//路由处: { path:'/home', name:'Home', component:Home } 调用: this.$router.push({ path:'/home', query:{ id:id } })
Get:this.$route.query.id
Disadvantages and solutions of using V002-v-if and v-for together
Sincev-for
has a higher priority thanv-if
, it will go to v-if once every time it loops, and v-if passes Create and destroy DOM elements to control the display and hiding of elements, so elements will be constantly created and destroyed, causing page lag and performance degradation.
Solution:
1. Wrap an element in the outer or inner layer of v-for to usev-if
2. Use computed processing
is processed as:
computed: { qdleaderArrActive: function () { return this.qdleaderArr.filter(function (item) { return item.isActive }) } }
What operations are generally performed in V003-beforeDestory
beforedestoryed is a life cycle executed before the component is destroyed. In this life cycle, we can clear the callback function or timer
① Unbind the custom eventevent.$off
② Eliminate the timer ③ Unbind the custom DOM event Such as window.scroll, etc.
For example, this scenario: the date needs to be stored when I click on the query, and the reading memory needs to be refreshed, but when I click on other pages and come in again, the memory needs to be cleared
search(){ let time = { start: this.formSearch.beginSearchTime, end: this.formSearch.endSearchTime, timeRange: this.formSearch.timeRange, page: this.formSearch.page } localStorage.setItem('initTime',JSON.stringify(time)) } created () { let searchCarTime = JSON.parse(localStorage.getItem('initTime')) if (searchCarTime) { this.formSearch.beginSearchTime = searchCarTime.start this.formSearch.endSearchTime = searchCarTime.end, this.formSearch.timeRange = searchCarTime.timeRange this.formSearch.page = searchCarTime.page } }, beforeDestroy(){ localStorage.removeItem('initTime') }
V004-Similar component passing value
1. If it is a sibling component, the value can be passed through the parent element as an intermediate component
1.2$emit
Transfer value, receive props
Use $emit to pass the value of child1.vue to the parent component, the parent component will pass the value to child2.vue, child2.vue uses props to receive
parent.vue
我是父组件
child1.vue
我是child1组件
{{title}}
child2.vue
{{ptitle}}
2. By creating a bus, pass the value
// 创建一个文件,定义bus中间件,并导出 const bus = new Vue() // 在一个组件中发送事件 bus.$emit('事件名称', 传递的参数) // 在另一个组件中监听事件 bus.$on('事件名称', 得到传过来的参数)
Specific usage: Create a new bus.js file in the same directory as main.js
import Vue from 'vue' export default new Vue()
2. Pass the value in component a
First introduce thebus.js
file, and then pass the value$emit
to
3. Receive it in the same level b component through$on
Related learning recommendations:javascript video tutorial
The above is the detailed content of Selected vue interview questions (key points). For more information, please follow other related articles on the PHP Chinese website!