VUE3（四）事件及数据传递

1、element-ui

安装依赖：npm install element-plus --save，
main.js添加配置：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

2、v-model
下面这行代码，v-model实现了双向绑定，即①当username的值变化时，页面上的值也会变化 ②当页面上的值变化时，也会引起username的改变

<input type="text" v-model="username"></input>

它的底层原理，是通过v-bind绑定一个变量，实现①，再通过一个自定义事件实现②

<input type="text" :value="username" @input="$event.target.value"></input>
//上面这一行代码，在typescript中，无法判断$event.target的值是否为空，系统可能会报错，所以要采用下面这种断言写法，告诉系统它不空
<input type="text" :value="username" @input="(<HTMLInputElement>$event.target).value"></input>

3、具名插槽
作用：指定父组件的内容放在子组件的哪个插槽中

<!-- 父组件 -->
<template>
    <div>
        父组件区域
        <Child>
            <template v-slot:s1>
                <div>s1s1s1s1s1s1s1s1!!!!!!</div>
            </template>
            <template v-slot:s2>
                <div>s2222222222222222</div>
            </template>
        </Child>
    </div>
</template>

<!--子组件-->
<template>
    <div class="child">子组件区域<br>
        插槽s1内容：<slot name="s1"></slot>   
        <br>
        插槽s2内容：<slot name="s2"></slot>
    </div>
</template>

4、全局组件
有一组件Child.vue，现要把它全局注册（意思是使用的时候不用import），要在main.ts中写以下代码：

import Child from '/views/Child.vue';
app.component('Child',Child);