Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue 组件使用中的细节点

vue 组件使用中的细节点

作者头像
吴裕超
发布于 2019-05-25 09:55:58
发布于 2019-05-25 09:55:58
1.8K00
代码可运行
举报
文章被收录于专栏:吴裕超吴裕超
运行总次数:0
代码可运行

1、is属性

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<table>
  <blog-post-row></blog-post-row>
</table>

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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
代码运行次数:0
运行
AI代码解释
复制
// 定义一个名为 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
代码运行次数:0
运行
AI代码解释
复制
data: {
  count: 0
}

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
data: function () {
  return {
    count: 0
  }
}

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

3、ref引用

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- `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
代码运行次数:0
运行
AI代码解释
复制
<base-input ref="usernameInput"></base-input>
//现在在你已经定义了这个 ref 的组件里,你可以使用:
this.$refs.usernameInput

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

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用组件的细节点
上面代码中,row 组件在渲染页面时,并不会把tr节点渲染到tbody里面,而是被提升到了和table同一个级别的地方。原因是在html编码规范中,tbody里面只能放tr,正确的做法是使用tr标签添加is属性等于组件名称row :
小小杰啊
2022/12/21
5960
Vue3学习笔记(四)——组件、生命周期
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展,但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后,就可以像搭建积木一下来搭建我们的项目。
张果
2022/11/14
1.5K0
Vue3学习笔记(四)——组件、生命周期
vue之vue组件component整理
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
山行AI
2019/07/30
6.9K0
vue之vue组件component整理
Vue.js-组件 原
之前说过,我们可以通过以下方式创建一个Vue实例 new Vue({   el: '#some-element',   // 选项 })
tianyawhl
2019/04/04
5.4K0
Vue基础:组件--组件及组件通信
组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展。
奋飛
2019/08/15
2K0
Vue子组件与父组件(看了就会)
<font color="red" size=4>另外,组件创建还有两种创建方式:
程序员海军
2022/02/15
1.1K0
Vue 05.组件
组件: 组件是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化区别:
LittlePanger
2020/04/14
1.1K0
vue—你必须知道的
不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文,所以 this 不会按照预期指向 Vue 实例,然后 this.myMethod 将是未定义。
超然
2018/08/03
2.1K0
前端MVC Vue2学习总结(五)——表单输入绑定、组件
一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。 v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。 1.1.1、文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{
张果
2018/03/30
3.6K0
前端MVC Vue2学习总结(五)——表单输入绑定、组件
从样例中了解Vue2和Vue3中的ref的区别
在vue3中,vue团队重写了ref,主要通过ref来创建响应式元素,并且继承了vue2中的标识作用
言志志
2023/10/15
9000
从样例中了解Vue2和Vue3中的ref的区别
vue基础(学习官方文档)
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button>
全栈程序员站长
2022/09/20
5.6K0
vue基础(学习官方文档)
【云+社区年度征文】Vue深入dom到组件动画
MV,VM是Vue提供,关注model操作(es5:obj.properties(对象性能、内容)+虚拟dom)
瑞新
2020/12/18
2.4K0
【云+社区年度征文】Vue深入dom到组件动画
重学巩固你的Vuejs知识(上)
https://github.com/webVueBlog/interview-answe/issues/156
达达前端
2020/10/28
3.9K0
Vue的组件
本来还有几个后端知识点要看的,但是我的岗位目前办公处调到上海去了,而且被告知极有可能会做全栈开发...心情复杂... 只能赶紧看看Vue的组件,打包,脚手架问题了. 此去经年只能强大自己,拥抱变化了,上海的毒打会让我更加强壮. 关于本文,我建议如有看到我写的,建议看原版Vue手册,我写的只是整理成我自己最容易理解的方式.
名字是乱打的
2021/12/22
9960
Vue的组件
vue之组件边界情况处理
在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。
山行AI
2019/08/05
1.2K0
【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用 通过Vue.component
啦啦啦321
2018/01/03
1.2K0
【Vue】详解Vue组件系统
【前端大神面考面试官系列】入门Vue全家桶
达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装。
达达前端
2022/04/13
1.3K0
【前端大神面考面试官系列】入门Vue全家桶
前端系列13集-内置内容,单文件组件,进阶 API
在你的站点上动态渲染任意的 HTML 是非常危险的,因为它很容易导致 [XSS 攻击]。请只对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值
达达前端
2023/10/08
4490
vue课程大全
var app=new Vue({el:"#app",data:{msg:"hello vue!"}})
李才哥
2021/02/20
1.7K0
vue课程大全
用 ref 访问 Vue.js 程序中的 DOM[每日前端夜话0x9C]
本文适用于所有使用 Vue 的开发人, 包括初学者。在阅读本文之前,你应该具备一些前提条件:
疯狂的技术宅
2019/07/30
3.1K0
相关推荐
使用组件的细节点
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验