1、is属性

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

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

<table>
<blog-post-row></blog-post-row>
</table>

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

<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必须是函数

// 定义一个名为 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 并不是像这样直接提供一个对象:

data: {
count: 0
}

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

data: function () {
return {
count: 0
}
}

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

3、ref引用

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

<!-- `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 引用。例如:

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

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

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

vue 组件使用中的细节点的更多相关文章

  1. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  2. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  3. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

  4. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  5. vue组件的那些事($children,$refs,$parent)的使用

    如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...

  6. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  7. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  8. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  9. vue组件如何被其他项目引用

    自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...

随机推荐

  1. 你需要了解 Windows Phone 8.1 的11件事

    微软已经发布了其新一代手机操作系统 Windows Phone 8.1,拥有一些新的特性.从本质上来说,微软此次的大修让 Windows Phone 更接近 Android 和 iOS,对于使用体验的 ...

  2. 20155213 2016-2017-2 《Java程序设计》第七周学习总结

    20155213 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lamb ...

  3. 实验九 Web安全基础

  4. 【leetcode 简单】 第八十九题 赎金信

    给定一个赎金信 (ransom) 字符串和一个杂志(magazine)字符串,判断第一个字符串ransom能不能由第二个字符串magazines里面的字符构成.如果可以构成,返回 true :否则返回 ...

  5. 2017中国大学生程序设计竞赛 - 网络选拔赛 1004 HDU 6153 A Secret (字符串处理 KMP)

    题目链接 Problem Description Today is the birthday of SF,so VS gives two strings S1,S2 to SF as a presen ...

  6. js 语法简写积累

    if (!a || !b || !c || !d){//} 简写为:if([a, b, c, d].map(Boolean).includes(false)){//};

  7. 《区块链100问》第81集:应用类项目Augur

    Augur是基于以太坊区块链打造的去中心化预测平台,于2015年6月正式发布,是以太坊上的第一款应用. Augur采用了一个叫“群体智慧”的概念,它的意思是,一群人的智慧会高于这群人中最聪明的人.所以 ...

  8. linux中set、unset、export、env、declare,readonly的区别以及用法

    set命令显示当前shell的变量,包括当前用户的变量;   env命令显示当前用户的变量;   export命令显示当前导出成用户变量的shell变量.           每个shell有自己特有 ...

  9. no libsigar-amd64-linux.so in java.library.path 解决方法

    关于sigar的介绍可以参考这边博文 :https://www.cnblogs.com/luoruiyuan/p/5603771.html 在Linux上运行java程序时出现 no libsigar ...

  10. 【Linux】Linux基本命令扫盲【转】

    转自:http://www.cnblogs.com/lcw/p/3762927.html [VI使用] 1.在命令行模式     :在vi编辑器中将光标放在函数上,shift + k 可直接man手册 ...