slot多作用域 vue_vue_slot_作用域插槽

scoped slot 作用域插槽

问题：

1.什么是作用域插槽 ？？？ 它的作用是什么？？？ 要解决的是什么问题？？？ 特性是什么？？？ 应用场景是什么？？？

获取子组件slot中携带的数据

使用步骤:

(1). 我们可以在标签元素上使用v-bind指令绑定一个特性(属性)如：v-bind:my_prop，也被称为插槽prop

(2). 在父组件上访问绑定到slot插槽上的prop对象:

语法格式: slotProps.my_prop //这样即可访问my_prop对象

来自父组件的内容

{{slotProps.my_value}}

代码示例

Title

来自父组件的内容

{{slotProps.my_value}}

//注册一个全局组件

// 我们可以在标签元素上使用v-bind指令绑定一个特性(属性)如：v-bind:my_prop，也被称为插槽prop

// 在父组件上访问插槽prop：

// 语法格式: slotProps.my_prop 这样即可访问my_prop对象

Vue.component('child-component',{

data: function(){

return {

msg: '来自子组件的内容'

}

},

template: '

' +

'' +

'' +

'

'

});

//创建一个vue实例

var vue=new Vue({

el: '#app',

});

运行结果：

访问子组件的传递过来的数据