Component Basic - daniel-qa/Vue GitHub Wiki

Component Basic

vue3 CDN: <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

一个应用需要被挂载到一个 DOM 元素中。

以下实例我们将 Vue 应用挂载到

,应该传入 #app： 
const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

注册一个全局组件语法格式如下：

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

我们可以使用以下方式来调用组件：

<my-component-name></my-component-name>
  • 精簡版本(沒有 html Header Body)
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
    <runoob></runoob>
</div>
 
<script>
	
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 runoob的新全局组件
app.component('runoob', {
    template: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')
</script>
  • 正常版本 ( 有完整 Header Body )
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 示例</title>    
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <runoob></runoob>
    </div>
    
    <script>
    // 创建一个Vue 应用
    const app = Vue.createApp({});
    
    // 定义一个名为 runoob的新全局组件
    app.component('runoob', {
        template: '<h1>自定义组件!</h1>'
    });
    
    app.mount('#app');
    </script>
</body>
</html>
  • 注册一个 button-counter 组件，在每次点击后，计数器会加 1:
<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<div id="app">
    <button-counter></button-counter>
</div>

<script>
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    </button>`
})
app.mount('#app')
</script>

注意：template 中 ` 是反引号，不是单单引号 '。

⚠️ **GitHub.com Fallback** ⚠️