前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue 组件使用中的细节点

vue 组件使用中的细节点

作者头像
吴裕超
发布2019-05-25 17:55:58
1.5K0
发布2019-05-25 17:55:58
举报
文章被收录于专栏:吴裕超

1、is属性

有些 HTML 元素,诸如 <ul><ol><table><select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li><tr><option>,只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如:

代码语言:javascript
复制
<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法:

代码语言:javascript
复制
<table>
  <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:

其实简单的来说,因为vue模板就是dom模板,使用的是浏览器原生的解析器进行解析,所以dom模板的限制也就成为vue模板的限制了,要求vue模板是有效的HTML代码片段。但是由于dom的一些html元素对放入它里面的元素有限制,所以导致有些组件没办法放在一些标签中,比如<ul></ul> <select></select><a></a> <table></table>等等这些标签中,所以需要增加is特性来扩展,从而达到可以在这些受限制的html元素中使用。

2、子组件中data必须是函数

代码语言:javascript
复制
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

当我们定义这个 <button-counter> 组件时,你可能会发现它的 data 并不是像这样直接提供一个对象:

代码语言:javascript
复制
data: {
  count: 0
}

取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

代码语言:javascript
复制
data: function () {
  return {
    count: 0
  }
}

因为一个子组件可能被调用多次,我们不希望几个子组件之间相互影响。每个子组件都应该有自己的独立数据。

3、ref引用

1、在html的标签上使用时,是获取这个标签的dom元素

代码语言:javascript
复制
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
...

console.log(this.$refs.p) // <p>hello</p>

2、当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref 特性为这个子组件赋予一个 ID 引用。例如:

代码语言:javascript
复制
<base-input ref="usernameInput"></base-input>
//现在在你已经定义了这个 ref 的组件里,你可以使用:
this.$refs.usernameInput

这里会获取子组件这个vue实例,然后可以访问这个实例的属性,举个例子,实现一个父组件统计子组件数字之和的功能

通过在子组件上定义两个ref属性,通过父组件可以访问到子组件的data,从而获得两个子组件数字之和。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-03-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、is属性
  • 2、子组件中data必须是函数
  • 3、ref引用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档