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

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)

原文地址:https://www.cnblogs.com/zz-zrr/p/8728225.html

时间: 2024-10-08 01:08:49

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

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

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

今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做了一个项目,然后通过项目中的一些案例进行总结. 今天我们来说说 Vue 中的内容分发 <slot>,首先 Vue 实现了一套内容分发的 API,这套 API 是基于当前的 Web Components 规范草案,将 <slot> 元素作为承载内分发内容的出口,内容分发是 Vue 中一个

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Vue学习笔记进阶篇——列表过渡及其他

本文为转载,原文:Vue学习笔记进阶篇--列表过渡及其他本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag

vue学习之组件

vue官方文档中定义组件通过调用Vue.component方法,一般没使用 定义组件 一个组件为一个vue文件,包含template(必须有),script,style三部分 //com.vue<template lang="html"> <div>//只能有一个html标签包裹里面所有节点 child component{{name}} </div> </template> <script> export default{

Vue学习之组件切换及父子组件小结(八)

一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv=&q

Vue学习系列(二)——组件详解

前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. 什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 为什么要用到组件呢? 为了可重用性高,减少重复性开发,让我们可以使用独立可复用的小组件来构建大型应用. 基本 一.组件注册 1.通过Vue.extend()创建,然后由component来

Vue学习笔记进阶篇——过渡状态

本文为转载,原文:Vue学习笔记进阶篇--过渡状态Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态. 状态动画和watcher 通过 watcher 我们能监听到任何数值属性的数值更新.可能听起来很抽象,所以让我们先来看看使用 T