V001-vuerouter はどのように値を渡しますか?
1. コンポーネント
this でpath:'/detail/:id' 调用: this.$router.push({ path:'/home/${id}' })
を設定します。 $route.params.id
が取得できます。 [トピックの推奨事項]:2020 フロントエンド Vue インタビューの質問の概要 (回答付き)
2. router-link 内パラメータを
タグで渡します。
<router-link :to = { params:{ id:1 } }/>
次の方法でも取得できます: this.$route.params.id
ここでのパラメータ受け渡し方法は、ルーターリンクを介して受け渡す非表示のパラメーターです。
3. params の別の方法は、params を通じてパラメータを渡し、名前を通じてルーティングを設定することです。
//路由处: { path:'/home', name:'Home', component:Home } 调用: this.$router.push({ name:'Home', params:{ id:id } })
Get: this.$route.params.id
4. クエリを通じてパラメータを渡すと、パラメータはクエリの後の ?id=? に表示されます。 url
//路由处: { path:'/home', name:'Home', component:Home } 调用: this.$router.push({ path:'/home', query:{ id:id } })
Get:this.$route.query.id
V002-v-if と v-for を併用する場合の欠点と解決策
v-for
は v-if
よりも優先度が高いため、ループするたびに 1 回 v-if に進み、v-if が通過しますDOM 要素を作成および破棄して要素の表示と非表示を制御するため、要素が常に作成および破棄されるため、ページラグやパフォーマンスの低下が発生します。
解決策:
1. v-for の外側または内側の層で要素をラップして、v-if
2. computed を使用します。処理
<ul> <li v-for="item in qdleaderArr" v-if="item.isActive" :key="item.id" > {{ item.name }} </li> </ul>
は次のように処理されます。
computed: { qdleaderArrActive: function () { return this.qdleaderArr.filter(function (item) { return item.isActive }) } } <ul> <li v-for="item in qdleaderArrActive" :key="item.id" > {{ item.name }} </li> </ul>
V003 で一般的に実行される操作 -beforeDestory
beforedestoryed は、コンポーネントが実行される前に実行されるライフサイクルです。このライフサイクルでは、コールバック関数またはタイマーをクリアできます。
① カスタム イベントのバインドを解除します。 event.$off
② タイマーを削除します。 ③ ウィンドウなどのカスタム DOM イベントのバインドを解除します。スクロールなど。
たとえば、次のシナリオ: クエリをクリックしたときに日付を保存し、読み取りメモリを更新する必要がありますが、他のページをクリックして再度アクセスすると、メモリをクリアする必要があります
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-値を渡す同様のコンポーネント
1。兄弟コンポーネントの場合、値は次のように親要素を介して渡すことができます。中間コンポーネント
1.2 $emit
値を転送し、プロパティを受け取る
$emitを使用してchild1.vueの値を親コンポーネントに渡します。親コンポーネントは次の値を渡します。 child2.vue への値。child2.vue は props を使用して、parent.vue
<template> <div> <h2>我是父组件</h2> <child1 @handleClickChange="handleClickChangeTitle"></child1> <child2 :ptitle="title"></child2> </div> </template> <script> import child1 from "child1";//文件地址 import child2 from "child2";//文件地址 export default { data() { return { title: "" }; }, components: { child1, child2 }, methods: { handleClickChangeTitle(title){//将改方法传递给child1组件 this.title = title } } } </script>
child1.vue<template> <div> <h2>我是child1组件</h2> <div> <input type="text"v-model="title"/> <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button> <div>{{title}}</div> </div> </div> </template> <script> export default { data() { return { title: "" }; }, methods: { handleClickChangeTitle(title){ this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法,同时将值传递给父组件 } } } </script>
##child2.vue
<template> <div>{{ptitle}}</div> </template> <script> export default { //接收父组件穿过来的值ptitle props:{ptitle:{ type: String}} } </script>
2. バスを作成して、値 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 创建一个文件,定义bus中间件,并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit(&#39;事件名称&#39;, 传递的参数)
// 在另一个组件中监听事件
bus.$on(&#39;事件名称&#39;, 得到传过来的参数)</pre><div class="contentsignin">ログイン後にコピー</div></div>
を渡します。 具体的な使用法: 新しい Bus.js ファイルを同じディレクトリに作成します。 main.js
import Vue from 'vue' export default new Vue()
2.コンポーネント a
に値を渡します最初に
bus.jsファイルを導入し、次に値
$emit を渡します<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template>
<div @click="onfocus"></div>
</template>
<script>
import Bus from &#39;@/bus.js&#39;
export default{
methods:{
onfocus:function(fromid){
Bus.$emit(&#39;getisshow&#39;,{
show:true
})
}
}
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div>
3 へ。$on
<script> import Bus from '@/bus.js' export default{ created(){ Bus.$on('getisshow',data => { console.log(data) //{show:true} }) } } </script>
を通じて同じレベル b コンポーネントで受け取ります。関連する学習の推奨事項:
JavaScript ビデオ チュートリアル
以上がvue の面接で選ばれた質問 (重要なポイント)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。