Composition Api
セットアップ関数は、新しいコンポーネント オプションです。コンポーネント内で複合 API を使用するためのエントリ ポイントとして機能します。
呼び出しのタイミング:
setup 関数は beforeCreate フックの前に呼び出されます
戻り値
setup がオブジェクトを返す場合、コンポーネント テンプレートでオブジェクトのプロパティにアクセスできます
パラメーター
2 つのパラメータを受信します
setup.vue
<template> <div> setup </div> </template> <script> export default{ setup(){ console.log('setup.....') }, beforeCreate() { console.log('beforeCreate...') }, } </script> <style> </style>
app.vue
<template> <comp-setup> </comp-setup> </template> <script> /*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/ import CompSetup from './components/setupview' export default { name: 'App', components: { CompSetup, } } </script> <style> </style>
<template> <div> {{ name }} <p>{{ user.username }}</p> </div> </template> <script> export default{ //setup不能访问this //可以接收参数 setup(props,context){ // console.log('setup.....') //这种返回的数据不具有响应式 // let name='tom' // return { // name, // } return { name:'tom', user:{ username:'admin', password:'123' } } }, beforeCreate() { // console.log('beforeCreate...') }, props:{ msg:String } } </script> <style> </style>
<template> <comp-setup msg="welcome"> </comp-setup> </template> <script> /*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/ import CompSetup from './components/setupview' export default { name: 'App', components: { CompSetup, } } </script> <style> </style>
vue.js ビデオ チュートリアル]
以上がVue3 のセットアップ関数 (エントリ ポイント) の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。