Skip to content

Commit 4ae37da

Browse files
fix: use current mount API (vuejs#222)
1 parent 1d1eee0 commit 4ae37da

File tree

2 files changed

+23
-34
lines changed

2 files changed

+23
-34
lines changed

src/examples/dynamic-components/index.html

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,19 @@
2626
</div>
2727
</body>
2828
<script>
29-
const app = Vue.createApp()
29+
const app = Vue.createApp({
30+
data() {
31+
return {
32+
currentTab: 'Home',
33+
tabs: ['Home', 'Posts', 'Archive']
34+
}
35+
},
36+
computed: {
37+
currentTabComponent() {
38+
return 'tab-' + this.currentTab.toLowerCase()
39+
}
40+
}
41+
})
3042

3143
app.component('tab-home', {
3244
template: `<div>Home component</div>`
@@ -38,21 +50,6 @@
3850
template: `<div>Archive component</div>`
3951
})
4052

41-
app.mount(
42-
{
43-
data() {
44-
return {
45-
currentTab: 'Home',
46-
tabs: ['Home', 'Posts', 'Archive']
47-
}
48-
},
49-
computed: {
50-
currentTabComponent() {
51-
return 'tab-' + this.currentTab.toLowerCase()
52-
}
53-
}
54-
},
55-
'#dynamic-component-demo'
56-
)
53+
app.mount('#dynamic-component-demo')
5754
</script>
5855
</html>

src/guide/migration/global-api.md

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -122,28 +122,20 @@ app.use(VueRouter)
122122

123123
## Mounting App Instance
124124

125-
After being initialized with `createApp()`, the app instance `app` can be used to mount a Vue root instance with `app.mount(VueInstance, domTarget)`:
125+
After being initialized with `createApp(VueInstance)`, the app instance `app` can be used to mount a Vue root instance with `app.mount(domTarget)`:
126126

127127
```js
128128
import { createApp } from 'vue'
129129
import MyApp from './MyApp.vue'
130130

131-
const app = createApp()
132-
app.mount(MyApp, ‘#app’)
133-
```
134-
135-
The `mount` method can also accept props to be passed to the root component via a third argument:
136-
137-
```js
138-
app.mount(MyApp, '#app', {
139-
// props to be passed to root component
140-
})
131+
const app = createApp(MyApp)
132+
app.mount('#app')
141133
```
142134

143135
With all these changes, the component and directive we have at the beginning of the guide will be rewritten into something like this:
144136

145137
```js
146-
const app = createApp()
138+
const app = createApp(MyApp)
147139

148140
app.component('button-counter', {
149141
data: () => ({
@@ -159,7 +151,7 @@ app.directive('focus', {
159151
// now every Vue instance mounted with app.mount(), along with its
160152
// component tree, will have the same “button-counter” component
161153
// and “focus” directive without polluting the global environment
162-
app.mount(MyApp, '#app')
154+
app.mount('#app')
163155
```
164156

165157
## Provide / Inject
@@ -192,15 +184,15 @@ import { createApp } from 'vue'
192184
import Foo from './Foo.vue'
193185
import Bar from './Bar.vue'
194186

195-
const createMyApp = () => {
196-
const app = createApp({})
187+
const createMyApp = (VueInstance) => {
188+
const app = createApp(VueInstance)
197189
app.directive('focus' /* ... */)
198190

199191
return app
200192
}
201193

202-
createMyApp().mount(Foo, '#foo')
203-
createMyApp().mount(Bar, '#bar')
194+
createMyApp(Foo).mount('#foo')
195+
createMyApp(Bar).mount('#bar')
204196
```
205197

206198
Now the `focus` directive will be available in both Foo and Bar instances and their descendants.

0 commit comments

Comments
 (0)