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:父组件向子组件传值(数据),驼峰式改为横线式。

Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})

3、scope 作用域

在父级中,具有特殊属性 scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象:

<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
 
4、is 用于动态组件并且给予DOM内模板到限制来工作
 
动态组件:
由于table、ul、ol等标签内无法插入自定义标签,只能插入特定标签,所以使用is属性带入。通过使用保留的 <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>

 

 5.slot分发内容
不具名slot用来备用插入,子组件只有不具名的slot时候,父组件才回调用slot内容,如果子组件有其他内容,父组件的内容会替换掉slot内容,slot内容不显示。
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>

  

6、sync 字符修饰符
当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定的值。
是一个会被扩展为一个自动更新父组件属性的 v-on 侦听器。
如<comp :foo.sync="bar"></comp>会被拓展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:this.$emit('update:foo', newValue)

vue学习:props,scope,slot,ref,is,slot,sync等知识点的更多相关文章

  1. vue学习--Props

    Props:        props用以从父组件接收数据:                     使用:                Vue.component('child',{        ...

  2. Vue学习笔记:Slot

    转自:https://www.w3cplus.com/vue/vue-slot.html 在Vue中,slot也分多种,从Vue的官网中可以获知,其主要分为:单个插槽.具名插槽和作用域插槽三种 父组件 ...

  3. Vue组件之props,$emit与$on以及slot分发

    组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式  props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...

  4. 组件基础(插槽slot)—Vue学习笔记

    刚开始我们淡淡提过<slot></slot>现在深入了解一下. slot可以进行父组件传值到子组件. 比如:我们将hiboy通过<slot>传递到组件中. < ...

  5. Vue一个案例引发「内容分发slot」的最全总结

    今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...

  6. 044——VUE中组件之使用内容分发slot构建bootstrap面板panel

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue父子组件传值$parent , ref,$refs,props大总结

    子组件: <template> <div class="child"> <slot name='meiyong'></slot> & ...

  8. Vue.js 作用域、slot用法(单个slot、具名slot)

    作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...

  9. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

随机推荐

  1. 使用Hash函数和MAC产生伪随机数

    基于Hash函数的PRNG 流程非常类似于对称密码的CTR工作模式 算法的伪码如下 m = ⌈n/outlen⌉ data = V W = the null String for i = 1 to m ...

  2. Android PackageManager源码浅析以及静默安装实现方式

    Aandroid应用管理    >http://blog.csdn.net/sk719887916/article/details/50314017 skay整理.        >201 ...

  3. Android 官方命令深入分析之android

    作者:宋志辉 android命令是一个非常重要的开发工具,它可以: 创建.删除和查看Android Virtual Devices(AVDs). 创建和更新android项目. 更新你的android ...

  4. [C++学习历程]基础部分 C++中的类型和声明

    前面搭起了C++的VS环境,可以在VS中编写C++代码了,也运行了最简单的一个程序Helloworld.那么我们该怎么才能写出功能强大的程序,怎样才能随心所欲的应用呢,那就需要重新回头来,从C++基础 ...

  5. pig代码格式上小注意

    1,%default file test.txt 中不要用引号,'' 和""都不行.'file'不会被识别 2,pig判断相等,用==,不是一个=.. 3,pig中只用单引号,不用 ...

  6. windows下git库的ssh连接,使用public key的方法

    在windows下进行项目开发,使用git,通过ssh方式与git库连接,而ssh方式用public key实现连接. 首先需要下载mygit,安装后使用git bash.git bash(有GUI界 ...

  7. 如何在Git中撤销一切 | 干货

    翻译:李伟 审校:张帆 译自:Github JF杰微刊:如何在Git中撤销一切 任何一个版本控制系统中,最有用的特性之一莫过于 "撤销(undo)"操作.在Git中,"撤 ...

  8. 17_Android中Broadcast详解(有序广播,无序广播)最终广播,Bundle传递参数,传递参数的时候指定权限

     1  Broadcast是Android中的四大组件之一,他的用途很大,比如系统的一些广播:电量低.开机.锁屏等一些操作都会发送一个广播. 2  广播被分为两种不同的类型:"普通广播( ...

  9. CTBS问题百科

    1.浏览CTBS网站时,Service Unavailable或应用程序池自动停止的现象 解决方法: 点击"开始"-"控制面板"-"管理工具" ...

  10. C#之结尾篇

    在Top10语言中,C#是最优美的语言,没有之一,在Top10语言中,C#所可用的标准库及可获得其他库是最强大的之一,这个必须带上之一,因为有java在,在Top语言中,C#语言是性能最高的语言之一, ...