vue学习:props,scope,slot,ref,is,slot,sync等知识点
1、ref
:为子组件指定一个索引 ID,给元素或者组件注册引用信息。refs是一个对象,包含所有的ref组件。
<div id="parent">
<user-profile ref="profile"></user-profile>(子组件)
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
ps:$表示refs为vue对象,而不是普通的js对象。
2、props:父组件向子组件传值(数据),驼峰式改为横线式。
3、scope 作用域
在父级中,具有特殊属性 scope
的 <template>
元素必须存在,表示它是作用域插槽的模板。scope
的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象:
<component>
元素,动态地绑定到它的 is
特性,我们让多个组件可以使用同一个挂载点,并动态切换:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var vm = new Vue({ el: '#example' , data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) <component v-bind:is= "currentView" > <!-- 组件在 vm.currentview 变化时改变! --> </component> |
my-row是自定义组件
1
2
3
|
<table> <tr is= "my-row" ></tr> </table> |
1
2
3
4
5
6
|
<div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div> |
1
2
3
4
5
6
7
8
|
父组件模版: <div> <h1>我是父组件的标题</h1> <my-component> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </my-component> </div> |
1
2
3
4
5
6
7
8
9
|
渲染结果: <div> <h1>我是父组件的标题</h1> <div> <h2>我是子组件的标题</h2> <p>这是一些初始内容</p> <p>这是更多的初始内容</p> </div> </div> |
v-on
侦听器。foo
的值时,它需要显式地触发一个更新事件:this.$emit('update:foo', newValue)vue学习:props,scope,slot,ref,is,slot,sync等知识点的更多相关文章
- vue学习--Props
Props: props用以从父组件接收数据: 使用: Vue.component('child',{ ...
- Vue学习笔记:Slot
转自:https://www.w3cplus.com/vue/vue-slot.html 在Vue中,slot也分多种,从Vue的官网中可以获知,其主要分为:单个插槽.具名插槽和作用域插槽三种 父组件 ...
- Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...
- 组件基础(插槽slot)—Vue学习笔记
刚开始我们淡淡提过<slot></slot>现在深入了解一下. slot可以进行父组件传值到子组件. 比如:我们将hiboy通过<slot>传递到组件中. < ...
- Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
- 044——VUE中组件之使用内容分发slot构建bootstrap面板panel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue父子组件传值$parent , ref,$refs,props大总结
子组件: <template> <div class="child"> <slot name='meiyong'></slot> & ...
- Vue.js 作用域、slot用法(单个slot、具名slot)
作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
随机推荐
- Error running app: Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled.
废了半天劲才解决... 就三步:菜单栏,Tools -> Adnroid -> enable ADB integration
- (八十六)使用系统自带的分享框架Social.framework
使用Social.framework十分简单,能够便捷的分享到主流的社交框架. ①导入主头文件 #import <Social/Social.h> ②以新浪微博为例,首先判断服务是否可用, ...
- Maven项目中获取classpath和资源文件的路径
假设资源文件放在maven工程的 src/main/resources 资源文件夹下,源码文件放在 src/main/java/下, 那么java文件夹和resources文件夹在运行时就是cl ...
- MariaDB存储引擎
MariaDB存储引擎 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MariaDB的特点,而且是一种插入式的存储引擎概念.这决定了MariaDB数据库中的表可 ...
- JAVA之旅(十五)——多线程的生产者和消费者,停止线程,守护线程,线程的优先级,setPriority设置优先级,yield临时停止
JAVA之旅(十五)--多线程的生产者和消费者,停止线程,守护线程,线程的优先级,setPriority设置优先级,yield临时停止 我们接着多线程讲 一.生产者和消费者 什么是生产者和消费者?我们 ...
- 【Django】优化小技巧之清除过期session
事情是这样的,大概也就几万注册用户的站点(使用django1.6), session 存储在关系型数据库,这次上线之后发现session表几十万数据了,过期session没有被自动删除 思考 官网 s ...
- Gradle 1.12翻译——第二十章. 构建环境
有关其他已翻译的章节请关注Github上的项目:https://github.com/msdx/gradledoc/tree/1.12,或访问:http://gradledoc.qiniudn.com ...
- android 的android httpClient详解
AndroidHttpClient结构: public final class AndroidHttpClient extends Object implements HttpClient 前言: 这 ...
- BLOCK/字面量(语法糖)OC——第六天
1.//block ,块语法,实质是匿名函数,是对C语言中函数的扩充,扩展: //block 语法可以用来保存一段代码或者用来调用一段封装好的代码: //block 语法由于是C语言实现的,所以执 ...
- 小强的HTML5移动开发之路(1)——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...