鍍金池/ 問答/HTML/ vue的作用域插槽的問題

vue的作用域插槽的問題

完整代碼：
<!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>一個可從子組件獲取數(shù)據(jù)的可復(fù)用的插槽</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 上海'
                       ,'陳意涵許富翔結(jié)婚'
                       ,'歐洲攻略'
                       ,'餓了么致歉'
                       ,'紀凌塵否認出軌'
                       ,'陳意涵寶寶性別'
                       ,'美岐宣儀紫寧回隊'
                    ],
            }
        },
        template:`
                <div>
                新浪微博熱搜：
                <slot :news='news'></slot>
                </div>
                `
    })
    var vm = new Vue({
        el:'#app',

    })
</script>

</body>
</html>
問題：作用域插槽通過屬性綁定了news數(shù)組，為啥通過slot-scope='news'接收過來的卻是一個對象？望大佬解釋一下，謝謝

clipboard.png

回答
編輯回答
帥到炸

因為slot-scope僅暴露出來一個scope對象，并不以你的命名轉(zhuǎn)移
也許是因為只有一個屬性讓你看起來有點繞，看下面這個例子也許能讓你更容易理解一些

<slot :news='news' :index="index"></slot>
<template slot-scope="scope">
  {{ scope.news }}
  {{ scope.index }}
</template>

你如果想讓代碼更直觀一點，可以直接結(jié)構(gòu)slot-scope

<template slot-scope="{ news }">
  {{ news }}
</template>
2017年3月30日 19:28
編輯回答
你的瞳

官網(wǎng)就是結(jié)構(gòu)后用的呀
插槽

2017年5月8日 13:25