ウォッチは初期化されると即座に実行されます。
watch はリスナーのプロパティが変更されたときにトリガーされ、初期化時には実行されません。
//作成時に一度だけ手動で呼び出す必要があり、初期化時にのみトリガーされる。
export default {
data() { return { searchText: 'Joe' } },
created() {
this.fetchUserList();
},
watch: {
searchText: 'fetchUserList',
},
methods: {
fetchUserList() { console.log(this.searchText)}
}
}
//近道: immediate属性を追加して、初期化時にもトリガーされるようにする。
export default{
data(){ return { searchText:''} },
watch: {
searchText: {
handler: 'fetchUserList',
immediate: true,
}
},
methods:{
featchUserList(){console.log(this.searchText)}
}
}
ルーティング・コンポーネントがパラメータを渡す - ルーティング・パラメータを分離
//一般的に、コンポーネント内でパラメータを渡すには$route
export default {
methods: {
getParamsId() {
return this.$route.params.id
}
}
}
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
コンポーネントで$routeを使うと、対応するルートに高度に結合され、特定のURLへの使用を制限することで柔軟性が制限されます。
正しいのは、小道具を使ってデカップリングすることです。
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 名前付きビューを含むルートについては、別の`props`
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
//Boolean return props: ルートのpropsプロパティをtrueに設定すると、コンポーネントはprops経由でパラメータを受け取ることができる。
export default {
props: ['id'],
methods: {
getParamsId() {
return this.id
}
}
}
//関数モードはpropsを返す
const router = new VueRouter({
routes: [{
path: '/user/:id',
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
vueドキュメント：
