vue学习:props,scope,slot,ref,is,slot,sync等知识点

Posted zz-zrr

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)

以上是关于vue学习:props,scope,slot,ref,is,slot,sync等知识点的主要内容,如果未能解决你的问题,请参考以下文章

vue学习:props,scope,slot,ref,is,sync等知识点

通过 Vue.js 中的 slot-scope 将 props 传递给所有子项的正确方法

vue 循环slot (slot-scope)

[Vue @Component] Pass Props Between Components with Vue Slot Scope

Vue提升:理解vue中的 slot-scope=“scope“

antd vue里面 a-table再次封装,slot-scope如何跨组件传递?