vue 组件使用中的细节点
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>
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
- 字符串 (例如:
template: '...'
) - 单文件组件 (
.vue
) <script type="text/x-template">
其实简单的来说,因为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 组件使用中的细节点的更多相关文章
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- 关于Vue父子组件传值(复杂数据类型的值)的细节点
vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...
- 深入理解 Vue 组件
深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- vue组件的那些事($children,$refs,$parent)的使用
如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
- vue2.0 如何自定义组件(vue组件的封装)
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- vue组件如何被其他项目引用
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用.本文就粗细的介绍下,如有疑问欢迎共同讨论.在这里你能了解下如下知识点: 1. 如何发布一个包到npmjs仓库上 2.如何引用 ...
随机推荐
- Redis实战(一)CentOS 7上搭建redis-3.0.2
1.安装redis wget http://download.redis.io/releases/redis-3.0.2.tar.gz tar zxvf redis-3.0.2.tar.gz cd ...
- [csp-201509-3]模板生成系统
#include<bits/stdc++.h> using namespace std; ; string a[N],b[N],c[N]; int main() { //freopen(& ...
- HDU 2087 剪花布条 (KMP 不允许重叠的匹配)
题目链接 Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Inp ...
- Django认证系统实现的web页面
结合数据库.ajax.js.Djangoform表单和认证系统的web页面 一:数据模块 扩展了Django中的user表,增加了自定义的字段 from django.db import models ...
- 32、TreeSet简介
使用TreeSet存储Integer对象 TreeSet的特点是可以对存放进去的元素进行排序. package com.sutaoyu.list; import java.util.TreeSet; ...
- Python练习-time模块
明天的明天的明天,雾草! # 编辑者:闫龙 #显示当前时间三天后是星期几? import time t = time.time()+((24*3600)*3) tl = time.localtime( ...
- Openflow Plugin学习笔记3
MDController.java 中的start方法,创建了SwitchConnectionHandlerImpl实例 SwitchConnectionHandlerImpl switchConne ...
- std::max 错误
Today I typed the following: int t = (std::max)(timeout, lagtime); Why did I put parentheses around ...
- Go语言的各种Print函数
Go语言的各种Print函数 func Fprintf(w io.Writer, format string, a ...interface{}) (n int, err error) func Pr ...
- python学习笔记之split()方法与with
Python split()方法 以下内容摘自:http://www.runoob.com/python/att-string-split.html 描述 Python split()通过指定分隔符对 ...