Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 14 additions & 17 deletions src/examples/dynamic-components/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,19 @@
</div>
</body>
<script>
const app = Vue.createApp()
const app = Vue.createApp({
data() {
return {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
}
},
computed: {
currentTabComponent() {
return 'tab-' + this.currentTab.toLowerCase()
}
}
})

app.component('tab-home', {
template: `<div>Home component</div>`
Expand All @@ -38,21 +50,6 @@
template: `<div>Archive component</div>`
})

app.mount(
{
data() {
return {
currentTab: 'Home',
tabs: ['Home', 'Posts', 'Archive']
}
},
computed: {
currentTabComponent() {
return 'tab-' + this.currentTab.toLowerCase()
}
}
},
'#dynamic-component-demo'
)
app.mount('#dynamic-component-demo')
</script>
</html>
26 changes: 9 additions & 17 deletions src/guide/migration/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,28 +122,20 @@ app.use(VueRouter)

## Mounting App Instance

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

```js
import { createApp } from 'vue'
import MyApp from './MyApp.vue'

const app = createApp()
app.mount(MyApp, ‘#app’)
```

The `mount` method can also accept props to be passed to the root component via a third argument:

```js
app.mount(MyApp, '#app', {
// props to be passed to root component
})
const app = createApp(MyApp)
app.mount('#app')
```

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

```js
const app = createApp()
const app = createApp(MyApp)

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

## Provide / Inject
Expand Down Expand Up @@ -192,15 +184,15 @@ import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = () => {
const app = createApp({})
const createMyApp = (VueInstance) => {
const app = createApp(VueInstance)
app.directive('focus' /* ... */)

return app
}

createMyApp().mount(Foo, '#foo')
createMyApp().mount(Bar, '#bar')
createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')
```

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