基本用法

当我们创建好了Vue应用实例后，使用mount方法可以将其绑定到指定的HTML元素上。应用实例可以使用component方法来定义组件，定义好组件后，可以直接在HTML文档中进行使用。
自定义警告提示框：

<script>
  const App = Vue.createApp({})
  
  const alertComponent = {
    data() {
      return {
        msg: "警告框提示",
        count: 0
      }
    },
    methods: {
      click() {
        alert(this.msg + this.count++)
      }
    },
    template: `<div><button @click="click">按钮</button></div>`
  }
  
  App.component("my-alert", alertComponent)
  App.mount("#Application")
</script>

需要使用自定义的组件时，只需使用组件名标签即可：

<div id="Application">
    <my-alert></my-alert>
    <my-alert></my-alert>
</div>

处理组件事件

用emit传递事件

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="Application">
        <my-alert @myclick="appfunc" title="btn1"></my-alert>
        <my-alert title="btn2"></my-alert>
    </div>
    <script>
        const App = Vue.createApp({
            methods:{
                appfunc(){
                    console.log("btn clicked")
                }
            }
        })
        const alertComponent = {
            props:["title"],
            template:`<div><button @click="$emit('myclick')">{{title}}</button></div>`
        }
        App.component("my-alert",alertComponent)
        App.mount("#Application")
    </script>
</body>
</html>

可以同时传递一些参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="Application">
        <my-alert @myclick="appfunc" title="btn1"></my-alert>
        <my-alert @myclick="appfunc" title="btn2"></my-alert>
    </div>
    <script>
        const App = Vue.createApp({
            methods:{
                appfunc(param){
                    console.log(param+" clicked")
                }
            }
        })
        const alertComponent = {
            props:["title"],
            template:`<div><button @click="$emit('myclick',title)">{{title}}</button></div>`
        }
        App.component("my-alert",alertComponent)
        App.mount("#Application")
    </script>
</body>
</html>

若在传递事件之前，子组件还有一些内部的逻辑需要处理，也可以在子组件中包装一个方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="Application">
        <my-alert @myclick="appfunc" title="btn1"></my-alert>
        <my-alert @myclick="appfunc" title="btn2"></my-alert>
    </div>
    <script>
        const App = Vue.createApp({
            methods:{
                appfunc(param){
                    console.log(param+" clicked")
                }
            }
        })
        const alertComponent = {
            props:["title"],
            methods:{
                click1(){
                    console.log("inside")
                    this.$emit('myclick',this.title)
                }
            },
            template:`<div><button @click="click1">{{title}}</button></div>`
        }
        App.component("my-alert",alertComponent)
        App.mount("#Application")
    </script>
</body>
</html>

在组件上使用v-model指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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="Application">
        <my-input v-model="inputText"></my-input>
        <div>{{inputText}}</div>
        <button @click="inputText = ''">清空</button>
    </div>
    <script>
        const App = Vue.createApp({
            data() {
                return {
                    inputText: ""
                }
            }
        })
        const inputComponent = {
            props: ["modelValue"],
            methods: {
                action(event) {
                    this.$emit('update:modelValue', event.target.value)
                }
            },
            template: '<div><span>输入框:</span><input :value="modelValue" @input="action"></div>'
        }
        App.component("my-input", inputComponent)
        App.mount("#Application")
    </script>
</body>
</html>

其实，所有支持v-model指令的组件中默认都会提供一个名为modelValue的属性，而**组件内部的内容变化后向外传递的事件为update:modelValue**，并且在事件传递时会将组件内容作为参数进行传递。因此，我们要让自定义组件能够使用v-model指令，只需要按照正确的规范来定义组件即可。