码迷,mamicode.com
首页 > 其他好文 > 详细

9.1、深入了解组件 vue3

时间:2021-02-03 10:34:36      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:sync   select   abc   picker   rgba   word   ops   value   methods   

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

非 Prop 的 Attribute

一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 classstyle 和 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 函数。

9.1、深入了解组件 vue3

标签:sync   select   abc   picker   rgba   word   ops   value   methods   

原文地址:https://www.cnblogs.com/caijinghong/p/14361327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!