9.1、深入了解组件 vue3

时间：2021-02-03 10:34:36 收藏：0 阅读：0

看了vue3的文档 .sync 貌似被抛弃了，无情，所以再来看一遍文档。

非 Prop 的 Attribute

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。

Attribute继承

app.component(‘date-picker‘, {
  template: `
    <div>
      <input type="datetime" />
    </div>
  `
})


<date-picker data-status="activated" style="color:red;" class="comm"></date-picker>

// 渲染
<div data-status="activated" style="color:red;" class="comm">
  <input type="datetime" />
</div>

同样的规则适用于事件监听器

<date-select @change="showChange"></date-select>


let app = Vue.createApp({
  methods: {
    showChange(event) {
      console.log("event", event)
      console.log(event.target.value)
    }
  }
})

app.component(‘date-select‘, {
  template: `
    <select>
      <option value="1">Yesterday</option>
      <option value="2">Today</option>
      <option value="3">Tomorrow</option>
    </select>
  `
})

当组件 date-select 中触发 onChange 事件时，则会调用 showChange 函数。