首页 > 代码库 > vue学习：props，scope，slot，ref，is，sync等知识点

vue学习：props，scope，slot，ref，is，sync等知识点

2024-10-25 17:21:39   205人阅读

 

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内模板到限制来工作
 
动态组件：
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：
var vm = new Vue({
  el: ‘#example‘,
  data: {
    currentView: ‘home‘
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

　　

 
5、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，sync等知识点


联系
我们