Vue 3 Tutorial (for Vue 2 Users) - Vue.js Developers

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

刚毅的火柴 · vue实现f11全屏esc退出全屏_vue. ...· 4 天前 ·

焦虑的单车 · 在 FormCreate 中使用自定义 ...· 5 天前 ·

干练的火柴 · avue使用render - CSDN文库· 5 天前 ·

坏坏的饭盒 · vue前端框架如何调用exe程序 | ...· 6 天前 ·

胡子拉碴的豆腐 · vue ...· 6 天前 ·

心软的吐司 · WGCNA构建基因共表达网络详细教程 - ...· 1 月前 ·

个性的电影票 · Postman 集成 | Fast Request· 1 月前 ·

腼腆的土豆 · MySQL :: Re: Failed ...· 2 月前 ·

行走的苹果 · Air City 空气市 | ...· 2 月前 ·

怕老婆的手套 · 独家：58个小区房价破10万，深圳学区有魔咒 ...· 5 月前 ·

</noscript><div data-server-rendered="true" id="__nuxt"><div id="__layout"><div><div id="loading" class="spinner-wrapper" style="display:block"><div class="spinner"/></div><div id="page" style=""><div><nav role="navigation" aria-label="main navigation" class="navbar is-dark" data-v-f42e0db2=""><div class="container" data-v-f42e0db2=""><div class="navbar-brand" data-v-6ef67a36="" data-v-f42e0db2=""><a href="/" class="navbar-item nuxt-link-active" data-v-6ef67a36=""><img src="//:0" width="35" height="35" class="v-lazy-image" data-v-6ef67a36=""/></a><a role="button" aria-label="menu" aria-expanded="false" class="navbar-burger burger" data-v-6ef67a36=""><span aria-hidden="true" data-v-6ef67a36=""/> <span aria-hidden="true" data-v-6ef67a36=""/> <span aria-hidden="true" data-v-6ef67a36=""/></a></div><div class="navbar-menu nav-menu is-dark" data-v-f42e0db2=""><div class="navbar-start"><div class="navbar-item has-dropdown is-hoverable"><a href="/" class="navbar-link nuxt-link-active">Courses</a><div class="navbar-dropdown"><a href="/courses/foundations/" class="navbar-item">Vue Foundations </a><a href="/courses/fullstack/" class="navbar-item">Vue Fullstack </a><a href="/courses/enterprise/" class="navbar-item">Vue Enterprise </a></div></div><div class="navbar-item has-dropdown is-hoverable"><a href="/blog/" class="navbar-link">Articles</a><div class="navbar-dropdown"><a href="/blog/" class="navbar-item">Latest </a><a href="/topics/" class="navbar-item">Topics </a></div></div><div class="navbar-item has-dropdown is-hoverable"><span class="navbar-link">More</span><div class="navbar-dropdown"><a href="/newsletter/" class="navbar-item">Newsletter </a><a href="/newsletter/sponsor/" class="navbar-item">Sponsorship </a><a href="https://discord.gg/dXUEkzc" class="navbar-item">Discord </a><a href="/about/" class="navbar-item">About </a></div></div></div></div></div></nav><section data-v-38d9c8d8=""><div class="article-body" data-v-38d9c8d8=""><div data-v-5b48df41="" data-v-38d9c8d8=""><h1 class="title is-2" data-v-5b48df41="">Vue 3 Tutorial (for Vue 2 Users)</h1><article class="article-info columns" data-v-5b48df41=""><figure class="column is-hidden-mobile" data-v-5b48df41=""><p class="image is-96x96 author-image" data-v-5b48df41=""><img src="/images/placeholder.png" alt="Anthony Gore" class="is-rounded v-lazy-image" data-v-5b48df41=""/></p></figure><div class="column" data-v-5b48df41=""><div class="content" data-v-5b48df41=""><h5 class="subtitle is-5" data-v-5b48df41=""><span data-v-5b48df41="">Anthony Gore | </span><span data-v-5b48df41="">March 16th, 2020 <em data-v-5b48df41="">(Updated May 9th, 2020) </em>| </span><span data-v-5b48df41="">9 min read</span></h5><div data-v-5b48df41=""><span class="tags" data-v-5b48df41=""><a href="/topics/vue-js/" class="tag is-rounded has-background-primary has-text-white" data-v-5b48df41="">vue.js </a><a href="/topics/components/" class="tag is-rounded has-background-primary has-text-white" data-v-5b48df41="">components </a><a href="/topics/composition-api/" class="tag is-rounded has-background-primary has-text-white" data-v-5b48df41="">composition api </a><a href="/topics/design-patterns/" class="tag is-rounded has-background-primary has-text-white" data-v-5b48df41="">design patterns </a></span></div></div></div></article></div><hr data-v-38d9c8d8=""/><div class="content" data-v-38d9c8d8=""><div data-v-64ad0323=""><div class="frontmatter-markdown" data-v-64ad0323=""><p data-v-64ad0323="">Vue 3 has not been officially released yet, but the maintainers have released beta versions for us punters to try and provide feedback on.</p><p data-v-64ad0323="">If you're wondering what the key features and main changes of Vue 3 are, I'll highlight them in this article by walking you through the creation of a simple app using Vue 3 beta 9.</p><p data-v-64ad0323="">I'm going to cover as much new stuff as I can including fragments, teleport, the Composition API, and several more obscure changes. I'll do my best to explain the rationale for the feature or change as well.</p><div data-v-64ad0323=""><p>Table of contents:</p><ul/><hr style="margin:2.5rem 0"/></div><h2 id="what-well-build" data-v-64ad0323="">What we'll build</h2><p data-v-64ad0323="">We're going to build a simple app with a modal window feature. I chose this because it conveniently allows me to showcase a number of Vue 3 changes.</p><p data-v-64ad0323="">Here's what the app looks like in it's opened and closed states so you can picture in your mind what we're working on:</p><p data-v-64ad0323=""><img src="/images/posts/vue-3-modal.png" alt="Vue 3 app modal" data-v-64ad0323=""/></p><h2 id="vue-3-installation-and-setup" data-v-64ad0323="">Vue 3 installation and setup</h2><p data-v-64ad0323="">Rather than installing Vue 3 directly, let's clone the project <code data-v-64ad0323="">vue-next-webpack-preview</code> which will give us a minimal Webpack setup including Vue 3.</p><pre data-v-64ad0323=""><code class="language-bash" data-v-64ad0323="">$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment $ cd vue3-experiment $ npm i </code></pre><p data-v-64ad0323="">Once that's cloned and the NPM modules are installed, all we need to do is remove the boilerplate files and create a fresh <code data-v-64ad0323="">main.js</code> file so we can create our Vue 3 app from scratch.</p><pre data-v-64ad0323=""><code class="language-bash" data-v-64ad0323="">$ rm -rf src/* $ touch src/main.js </code></pre><p data-v-64ad0323="">Now we'll run the dev server:</p><pre data-v-64ad0323=""><code class="language-bash" data-v-64ad0323="">$ npm run dev </code></pre><h2 id="creating-a-new-vue-3-app" data-v-64ad0323="">Creating a new Vue 3 app</h2><p data-v-64ad0323="">Straight off the bat, the way we bootstrap a new Vue app has changed. Rather than using <code data-v-64ad0323="">new Vue()</code>, we now need to import the new <code data-v-64ad0323="">createApp</code> method.</p><p data-v-64ad0323="">We then call this method, passing our Vue instance definition object, and assign the return object to a variable <code data-v-64ad0323="">app</code>.</p><p data-v-64ad0323="">Next, we'll call the <code data-v-64ad0323="">mount</code> method on <code data-v-64ad0323="">app</code> and pass a CSS selector indicating our mount element, just like we did with the <code data-v-64ad0323="">$mount</code> instance method in Vue 2.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">import { createApp } from "vue"; const app = createApp({ // root instance definition app.mount("#app"); </code></pre><h4 id="reason-for-change" data-v-64ad0323="">Reason for change</h4><p data-v-64ad0323="">With the old API, any global configuration we added (plugins, mixins, prototype properties etc) would <em data-v-64ad0323="">permanently mutate global state</em>. For example:</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">// Affects both instances Vue.mixin({ ... }) const app1 = new Vue({ el: '#app-1' }) const app2 = new Vue({ el: '#app-2' }) </code></pre><p data-v-64ad0323="">This really shows up as an issue in unit testing, as it makes it tricky to ensure that each test is isolated from the last.</p><p data-v-64ad0323="">Under the new API, calling <code data-v-64ad0323="">createApp</code> returns a fresh app instance that will not be polluted by any global configuration applied to other instances.</p><p data-v-64ad0323="">Learn more: <a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md" data-v-64ad0323="">Global API change RFC</a>.</p><h2 id="adding-state-properties" data-v-64ad0323="">Adding state properties</h2><p data-v-64ad0323="">Our modal window can be in one of two states - opened, or closed. Let's manage this with a boolean state property <code data-v-64ad0323="">modalOpen</code> which we'll give an initial value of <code data-v-64ad0323="">false</code>.</p><p data-v-64ad0323="">Under Vue 2, we could do this by creating a <code data-v-64ad0323="">data</code> property on our app instance and assigning an object to this where our <code data-v-64ad0323="">modalOpen</code> property would be declared i.e.:</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">const app = createApp({ data: { modalOpen: false </code></pre><p data-v-64ad0323="">This is no longer allowed. Instead, <code data-v-64ad0323="">data</code> must be assigned a <em data-v-64ad0323="">factory function which returns the state object</em>.</p><p data-v-64ad0323="">This is what you had to do for Vue components, but now it's enforced for Vue app instances as well.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">const app = createApp({ data: () =&gt; ({ modalOpen: false </code></pre><h4 id="reason-for-change-2" data-v-64ad0323="">Reason for change</h4><p data-v-64ad0323="">The advantage of using an object for data rather than a factory function is that, firstly, it was syntactically simpler, and secondly, you could share top-level state between multiple root instances e.g.:</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">const state = { sharedVal: 0 const app1 = new Vue({ state }); const app2 = new Vue({ state }); // Affects both instances app1._data.sharedVal = 1; </code></pre><p data-v-64ad0323="">The use case for this is rare and can be worked around. Since having two types of declarations is not beginner-friendly, it was decided to remove this feature.</p><p data-v-64ad0323="">Learn more: <a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0019-remove-data-object-declaration.md" data-v-64ad0323="">Data object declaration removed RFC</a></p><p data-v-64ad0323="">Before we move on, let's also add a method to toggle the <code data-v-64ad0323="">modalOpen</code> value. This is no different from Vue 2.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">const app = createApp({ data: () =&gt; ({ modalOpen: true methods: { toggleModalState() { this.modalOpen = !this.modalOpen; </code></pre><h2 id="using-a-root-component" data-v-64ad0323="">Using a root component</h2><p data-v-64ad0323="">If you go to the browser now and check the console, you'll see the warning "Component is missing render function", since we haven't yet defined a template for the root instance.</p><p data-v-64ad0323="">The best practice for Vue 2 is to create a minimal template for the root instance and create an <code data-v-64ad0323="">App</code> component where the main app markup will be declared.</p><p data-v-64ad0323="">Let's do that here, as well.</p><pre data-v-64ad0323=""><code class="language-bash" data-v-64ad0323="">$ touch src/App.vue </code></pre><p data-v-64ad0323="">Now we can get the root instance to render that component. The difference is that with Vue 2, we'd normally use a render function for doing this:</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">import App from "./App.vue"; const app = createApp({ render: h =&gt; h(App) app.mount("#app"); </code></pre><p data-v-64ad0323="">We can still do that, but Vue 3 has an even easier way - making <code data-v-64ad0323="">App</code> a <em data-v-64ad0323="">root component</em>. To do this, we can remove the root instance definition and instead pass the <code data-v-64ad0323="">App</code> component.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">import App from "./App.vue"; const app = createApp(App); app.mount("#app"); </code></pre><p data-v-64ad0323="">This means the <code data-v-64ad0323="">App</code> component is not just rendered by the root instance but <em data-v-64ad0323="">is</em> the root instance.</p><p data-v-64ad0323="">While we're at it, let's simply the syntax a little by removing the <code data-v-64ad0323="">app</code> variable:</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/main.js</em></p><pre data-v-64ad0323=""><code class="language-js" data-v-64ad0323="">createApp(App).mount("#app"); </code></pre><p data-v-64ad0323="">Moving over to the root component now, let's re-add the state and method to this component:</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/App.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;script&gt; export default { data: () =&gt; ({ modalOpen: true methods: { toggleModalState() { this.modalOpen = !this.modalOpen; &lt;/script&gt; </code></pre><p data-v-64ad0323="">Let's also make a new component for the modal feature:</p><pre data-v-64ad0323=""><code class="language-bash" data-v-64ad0323="">$ touch src/Modal.vue </code></pre><p data-v-64ad0323="">For now, we'll provide a minimal template including a slot for content. This ensures our modal is reusable. We'll add more to this component later.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/Modal.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt; &lt;div class="modal"&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/template&gt; </code></pre><h2 id="multi-root-templates" data-v-64ad0323="">Multi-root templates</h2><p data-v-64ad0323="">Let's now create the template for our root component. We'll create a button to open the modal which will trigger the <code data-v-64ad0323="">toggleModalState</code> method.</p><p data-v-64ad0323="">We'll also use our just-created modal component which will be rendered conditional on the value of <code data-v-64ad0323="">modalOpen</code>. Let's also insert a paragraph of text into the slot for content.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/App.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt; &lt;button @click="toggleModalState"&gt;Open modal&lt;/button&gt; &lt;modal v-if="modalOpen"&gt; &lt;p&gt;Hello, I'm a modal window.&lt;/p&gt; &lt;/modal&gt; &lt;/template&gt; &lt;script&gt; import Modal from "./Modal.vue"; export default { components: { Modal &lt;/script&gt; </code></pre><p data-v-64ad0323="">Notice anything odd about this template? Look again. I'll wait.</p><p data-v-64ad0323="">That's right - there are two root elements. In Vue 3, thanks to a feature called <em data-v-64ad0323="">fragments</em>, it is no longer compulsory to have a single root element!</p><div data-v-64ad0323=""/><h2 id="refactoring-with-composition-api" data-v-64ad0323="">Refactoring with Composition API</h2><p data-v-64ad0323="">The flagship feature of Vue 3 is the <em data-v-64ad0323="">Composition API</em>. This new API allows you to define component functionality using a <code data-v-64ad0323="">setup</code> function rather than with properties you add to the component definition object.</p><p data-v-64ad0323="">Let's now refactor our <em data-v-64ad0323="">App</em> component to use the Composition API.</p><p data-v-64ad0323="">Before I explain the code, be clear that all we're doing is <em data-v-64ad0323="">refactoring</em> - the functionality of the component will be the same. Also note that the template is not changed as the Composition API only affects the way we define the component functionality, not the way we render it.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/App.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt; &lt;button @click="toggleModalState"&gt;Open modal&lt;/button&gt; &lt;modal v-if="modalOpen"&gt; &lt;p&gt;Hello, I'm a modal window.&lt;/p&gt; &lt;/modal&gt; &lt;/template&gt; &lt;script&gt; import Modal from "./Modal.vue"; import { ref } from "vue"; export default { setup () { const modalOpen = ref(false); const toggleModalState = () =&gt; { modalOpen.value = !modalOpen.value; return { modalOpen, toggleModalState components: { Modal &lt;/script&gt; </code></pre><h4 id="setup-method" data-v-64ad0323=""><code data-v-64ad0323="">setup</code> method</h4><p data-v-64ad0323="">Firstly, notice we import the <code data-v-64ad0323="">ref</code> function which allows us to define a reactive variable <code data-v-64ad0323="">modalOpen</code>. This variable is equivalent to <code data-v-64ad0323="">this.modalOpen</code>.</p><p data-v-64ad0323="">The <code data-v-64ad0323="">toggleModalState</code> method is just a plain JavaScript function. However, notice that to change the value of <code data-v-64ad0323="">modalOpen</code> in the method body, we need to change its sub-property <code data-v-64ad0323="">value</code>. That's because reactive variables created using <code data-v-64ad0323="">ref</code> are wrapped in an object. This is necessary to retain their reactivity as they're passed around.</p><blockquote data-v-64ad0323=""><p data-v-64ad0323="">It's best to consult the <a href="https://vue-composition-api-rfc.netlify.com/#api-introduction" data-v-64ad0323="">Vue Composition API docs</a> if you want a detailed explanation of how <code data-v-64ad0323="">refs</code> work.</p></blockquote><p data-v-64ad0323="">Finally, we return <code data-v-64ad0323="">modalOpen</code> and <code data-v-64ad0323="">toggleModalState</code> from the <code data-v-64ad0323="">setup</code> method, as these are the values that get passed to the template when it's rendered.</p><h4 id="reason-for-change-3" data-v-64ad0323="">Reason for change</h4><p data-v-64ad0323="">Keep in mind that the Composition API is not a <em data-v-64ad0323="">change</em> as it's purely optional to use. The main motivation is to allow for better code organization and the reuse of code between components (as mixins are essentially an anti-pattern).</p><p data-v-64ad0323="">You'd be correct in thinking that refactoring the <code data-v-64ad0323="">App</code> component in this example to use the Composition API is unnecessary. But, if this were a much larger component, or we needed to share its features with other components, that's when you'd see its usefulness.</p><p data-v-64ad0323="">Providing a more in-depth example is beyond the scope of this blog post, so if you're interested to learn more about uses of the new API, check out my other article <a href="/2020/02/17/vue-composition-api-when-to-use" data-v-64ad0323="">When To Use The New Vue Composition API (And When Not To)</a>.</p><h2 id="teleporting-content" data-v-64ad0323="">Teleporting content</h2><p data-v-64ad0323="">If you've ever created a modal feature before, you'll know that it's commonly positioned just before the closing <code data-v-64ad0323="">&lt;/body&gt;</code> tag.</p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;body&gt; &lt;!--main page content here--&gt; &lt;!--modal here--&gt; &lt;/body&gt; </code></pre><p data-v-64ad0323="">This is done because modals usually have a page-covering background (see the image at the beginning if you don't know what I mean). To implement this with CSS, you don't want to have to deal with parent elements positioning and z-index stacking context, and so the simplest solution is to put the modal at the very bottom of the DOM.</p><p data-v-64ad0323="">This creates an issue with Vue.js, though, which assumes the UI will be built as a single tree of components. To allow segments of the tree to be moved elsewhere in the DOM, a new <code data-v-64ad0323="">teleport</code> component has been added in Vue 3.</p><p data-v-64ad0323="">To use the teleport, let's first add an element to the page where we want our modal content to be moved to. We'll go to <code data-v-64ad0323="">index.html</code> and place a <code data-v-64ad0323="">div</code> with ID <code data-v-64ad0323="">modal-wrapper</code> adjacent to Vue's mounting element.</p><p data-v-64ad0323=""><em data-v-64ad0323="">index.html</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;body&gt; &lt;div id="app"&gt;&lt;/div&gt;&lt;!--Vue mounting element--&gt; &lt;div id="modal-wrapper"&gt; &lt;!--modal should get moved here--&gt; &lt;/body&gt; </code></pre><p data-v-64ad0323="">Now, back in <code data-v-64ad0323="">App.vue</code>, we're going to wrap the modal content in the <code data-v-64ad0323="">teleport</code> component. We'll also need to specify a <code data-v-64ad0323="">to</code> attribute which will be assigned a query selector identifying the target element, in this case, <code data-v-64ad0323="">#modal-wrapper</code>.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/App.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt; &lt;button @click="toggleModalState"&gt;Open modal&lt;/button&gt; &lt;teleport to="#modal-wrapper"&gt; &lt;modal v-if="modalOpen"&gt; &lt;p&gt;Hello, I'm a modal window.&lt;/p&gt; &lt;/modal&gt; &lt;/teleport&gt; &lt;/template&gt; </code></pre><p data-v-64ad0323="">And that's it. Any content within the <code data-v-64ad0323="">teleport</code> will be rendered within the target element. However, it will still function like it was in it's original position in the hierarchy (regarding props, events etc).</p><p data-v-64ad0323="">So after you've saved your code, reload the page, inspect the DOM in dev tools, and be amazed!</p><p data-v-64ad0323="">Learn more: <a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0025-teleport.md" data-v-64ad0323="">Teleport RFC</a></p><h2 id="emitting-an-event" data-v-64ad0323="">Emitting an event</h2><p data-v-64ad0323="">Let's now add a button to our modal allowing it to be closed. To do this, we're going to add a <code data-v-64ad0323="">button</code> element to the modal tempate with a click handler that emits an event <code data-v-64ad0323="">close</code>.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/Modal.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt; &lt;div class="modal"&gt; &lt;slot&gt;&lt;/slot&gt; &lt;button @click="$emit('close')"&gt;Dismiss&lt;/button&gt; &lt;/template&gt; </code></pre><p data-v-64ad0323="">This event is will then be captured by the parent component and will toggle the value of <code data-v-64ad0323="">modalOpen</code>, logically making it <code data-v-64ad0323="">false</code> and causing the window to close.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/App.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt; &lt;modal v-if="modalOpen" @close="toggleModalState" &lt;p&gt;Hello, I'm a modal window.&lt;/p&gt; &lt;/modal&gt; &lt;/teleport&gt; &lt;/template&gt; </code></pre><p data-v-64ad0323="">So far, this feature is identical as it would be in Vue 2. However, in Vue 3 it's now recommended that you explicitly state a component's events using the new <code data-v-64ad0323="">emits</code> component option. Just like with props, you can simply create an array of strings to name each event the component will emit.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/Modal.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt;...&lt;/template&gt; &lt;script&gt; export default { emits: [ "close" ] &lt;/script&gt; </code></pre><h4 id="reason-for-change-4" data-v-64ad0323="">Reason for change</h4><p data-v-64ad0323="">Imagine opening the file of a component that someone else wrote, and seeing its props and events explicitly declared. Immediately, you would understand the interface of this component i.e. what it's meant to send and receive.</p><p data-v-64ad0323="">In addition to providing self-documenting code, you can also use the events declaration to validate your event payload, though I couldn't find a reason to do that in this example.</p><p data-v-64ad0323="">Learn more: <a href="https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md" data-v-64ad0323="">Emits Option RFC</a></p><h2 id="styling-slot-content" data-v-64ad0323="">Styling slot content</h2><p data-v-64ad0323="">To make our modal reusable, we've provided a slot for content. Let's begin to style that content by adding a <code data-v-64ad0323="">style</code> tag to the component.</p><p data-v-64ad0323="">It's a good practice to use <code data-v-64ad0323="">scoped</code> CSS in our components to ensure the rules we provide don't have unintended effects on other content in the page.</p><p data-v-64ad0323="">Let's make it so any paragraph text that gets put into the slot is italic. To do this, we'll create a new CSS rule using the <code data-v-64ad0323="">p</code> selector.</p><p data-v-64ad0323=""><em data-v-64ad0323="">src/Modal.vue</em></p><pre data-v-64ad0323=""><code class="language-html" data-v-64ad0323="">&lt;template&gt;...&lt;/template&gt; &lt;script&gt;...&lt;/script&gt; &lt;style scoped&gt; font-style: italic; &lt;/style&gt;