极客观点
项目管理
HarmonyOS
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的作用域插槽</title>
<link rel="stylesheet" href="./main.css">
<script src="./vue.js"></script></head>
<body>
<h1>Vue中的作用域插槽</h1>
<hr>
<p><strong>一个可从子组件获取数据的可复用的插槽</strong></p>
<div id="app">
<child>
<div slot-scope='news'>
<li v-for='item in news.news' >{{item}}</li>
<li>{{news}}</li>
<li>{{news.news}}</li>
</div>
</child>
</div>
<script>
Vue.component('child',{
data(){
return{
news:[
'以为傅恒买了iphone'
,'苏醒恋情'
,'F4 上海'
,'陈意涵许富翔结婚'
,'欧洲攻略'
,'饿了么致歉'
,'纪凌尘否认出轨'
,'陈意涵宝宝性别'
,'美岐宣仪紫宁回队'
],
}
},
template:`
<div>
新浪微博热搜：
<slot :news='news'></slot>
</div>
`
})
var vm = new Vue({
el:'#app',
})
</script></body>
</html>
问题：作用域插槽通过属性绑定了news数组，为啥通过slot-scope='news'接收过来的却是一个对象？望大佬解释一下，谢谢
因为
slot-scope仅暴露出来一个scope对象，并不以你的命名转移也许是因为只有一个属性让你看起来有点绕，看下面这个例子也许能让你更容易理解一些
你如果想让代码更直观一点，可以直接结构
slot-scope