举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > Vue 3.0 实例property

Vue 3.0 实例property

2023-05-27 17:18 VUE3教程

 Vue 3.0 实例property

#$data

  • 类型:Object

  • 详细:

组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。

  • 参考选项 / 数据 - data

#$props

  • 类型:Object

  • 详细:

当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。

#$el

  • 类型:any

  • 仅可读

  • 详细:

组件实例使用的根 DOM 元素。 对于使用片段的组件,$el将是Vue用于跟踪组件在DOM中位置的占位符DOM节点。建议使用模板引用直接访问DOM元素,而不是依赖$el

#$options

  • 类型:Object

  • 仅可读

  • 详细:

用于当前组件实例的初始化选项。需要在选项中包含自定义 property 时会有用处:

  const app = Vue.createApp({
    customOption: "foo",
    created() {
      console.log(this.$options.customOption) // => "foo"
    }
  })

#$parent

  • 类型:Vue instance

  • 仅可读

  • 详细:

父实例,如果当前实例有的话。

#$root

  • 类型:Vue instance

  • 仅可读

  • 详细:

当前组件树的根组件实例。如果当前实例没有父实例,此实例将会是其自己。

#$slots

  • 类型:{ [name: string]: (...args: any[]) => Array<VNode> | undefined }

  • 仅可读

  • 详细:

用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如:v-slot:foo 中的内容将会在 this.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。

在使用渲染函数书写一个组件时,访问 this.$slots 最有帮助。

  • 示例:

  <blog-post>
    <template v-slot:header>
      <h1>About Me</h1>
    </template>

  
    <template v-slot:default>
      <p>
        Here"s some page content, which will be included in $slots.default.
      </p>
    </template>

  
    <template v-slot:footer>
      <p>Copyright 2020 Evan You</p>
    </template>
  </blog-post>

  const app = Vue.createApp({})

  
  app.component("blog-post", {
    render() {
      return Vue.h("div", [
        Vue.h("header", this.$slots.header()),
        Vue.h("main", this.$slots.default()),
        Vue.h("footer", this.$slots.footer())
      ])
    }
  })

  • 参考

  • `` 组件

  • 通过插槽分发内容

  • 渲染函数 - 插槽

#$refs

  • 类型:Object
  • 仅可读
  • 详细:

一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例。

  • 参考
  • 模板 refs
  • 特殊 attributes - ref

#$attrs

  • 类型:Object
  • 仅可读
  • 详细:

包含了父作用域中不作为组件 props 或自定义事件。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定,并且可以通过 v-bind="$attrs" 传入内部组件——在创建高阶的组件时非常有用。

  • 参考
  • 非 Prop Attributes
阅读全文
以上是编程学为你收集整理的 Vue 3.0 实例property全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  •  Vue 3.0 Teleport

    Vue 3.0 Teleport

    2023-04-27 VUE3教程

    Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部,以构建一个组成应用程序 UI 的树。...

  •  XHTML 颜色名称

    XHTML 颜色名称

    2023-04-15 XHTML教程

    颜色可以使用颜色名称来定义。XHTML颜色名称下表列出了颜色名称。...

  •  XHTML高级教程 - XHTML定义

    XHTML高级教程 - XHTML定义

    2023-06-05 XHTML教程

    XHTML的定义本教程提供了有关XHTML的简要知识。它定义了XHTML的基本特征,与之相关的概念和术语。XHTML是Extended Hypertext Mar...

  •  XHTML 教程

    XHTML 教程

    2023-03-28 XHTML教程

    ...

  •  HTML 实体

    HTML 实体

    2023-04-17 HTML教程

    HTML实体有一些字符在HTML文档中有特殊的含义,例如 和 字符。要在内容中使用这些字符而不被解释为HTML,您可以使用HTML实体。实...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部