vue3.0重点_根组件实例而非应用实例-CSDN博客

应用实例 & 组件实例：

Vue3 以 Vue.createApp 创建 vue实例的【不是 Vue2 的new Vue 创建】，参数就是根组件实例。
```
const app = Vue.createApp({ /* 选项 */ })
```

应用实例暴露的大多数方法都会返回该同一实例，允许链式：

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

Vue挂载应用，使用 mount 方法：与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是根组件实例。
```
const vm = app.mount('#app')  // vm 是根组件实例，而不是 应用实例
```

模板语法

指令动态参数：【指令的动态参数很少使用到】

<a v-bind:[attributeName]="url"> ... </a>  // attributeName是 组件的 property 值，即vue的 data变量。如，令 attributeName="href",那么这个绑定将等价于 v-bind:href

同样事件的绑定也可以是动态的：

<a v-on:[eventName]="doSomething"> ... </a>

Class 与 Style 绑定

在组件上绑定 HTML Class：
如果你的组件有多个根元素【vue2的组件只有一个根元素，vue3是可以多个根元素的】，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作：

 <div id="app">
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})

app.component('my-component', {
 template: `
   <p :class="$attrs.class">Hi!</p>
   <span>This is a child component</span>
 `
})

事件处理

修饰符

自定义事件

【组件标签中才会使用自定义事件，原生标签中没有自定义事件】

推荐始终使用 kebab-case 的事件名，即自定义的事件名，使用 kebab-case 命名【全部小写的，短横线命名】。
自定义组件的 v-model：【组件标签的 v-model 修改才意义；原生标签中无法修改v-model传递参数，也没有意义】
- 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue
  作为事件。我们可以通过向 v-model 传递参数来修改这些名称：
- 分析：默认情况 v-model 中 v-bind 绑定的 modelValue属性【vue2中绑定的是value属性】。通过 v-model 传递参数，可以修改v-model绑定的props 属性名。
```
<my-component v-model:foo="bar"></my-component>
```
```
const app = Vue.createApp({})

app.component('my-component', {
  props: {
    foo: String
  },
  template: `
    <input 
      type="text"
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">
  `
})
```

组件上多个 v-model 绑定：基于上面讲的通过向 v-model 传递参数，可以修改 v-model 绑定不同的属性。从而实现组件中可以多个变量实现双向绑定。

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

const app = Vue.createApp({})

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `
})