• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue 3.0 选项 杂项

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

#name

  • 类型:string

  • 详细:

允许组件模板递归地调用自身。注意,组件在全局用 Vue.createApp({}).component({}) 注册时,全局 ID 自动作为组件的 name。

指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成 <AnonymousComponent>,这很没有语义。通过提供 name 选项,可以获得更有语义信息的组件树。

#delimiters

  • Type: Array<string>

  • Default: ['{{', '}}']

  • Restrictions: 此选项仅在完整版本中可用,并在浏览器中编译模板。

  • Details:设置用于模板内文本插入的分隔符。 通常,这用于避免与同样使用mustache语法的服务器端框架冲突。

  • Example:

  Vue.createApp({
    // Delimiters changed to ES6 template string style
    delimiters: ['${', '}']
  })

#inheritAttrs

  • 类型:boolean

  • 默认:true

  • 详细:

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrsfalse,这些默认行为将会被去掉。而通过实例 property $attrs 可以让这些 attribute 生效,且可以通过 v-bind 显性的绑定到非根元素上。

  • 用法:

  app.component('base-input', {
    inheritAttrs: false,
    props: ['label', 'value'],
    emits: ['input'],
    template: `
      <label>
        {{ label }}
        <input
          v-bind="$attrs"
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
        >
      </label>
    `
  })


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

上一篇:
Vue 3.0 实例property发布时间:2022-01-28
下一篇:
Vue 3.0 选择 组合发布时间:2022-01-28
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap