鍍金池/ 問(wèn)答/HTML/ vue的作用域插槽的問(wèn)題

vue的作用域插槽的問(wèn)題

完整代碼：
<!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>一個(gè)可從子組件獲取數(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é)婚'
                       ,'歐洲攻略'
                       ,'餓了么致歉'
                       ,'紀(jì)凌塵否認(rèn)出軌'
                       ,'陳意涵寶寶性別'
                       ,'美岐宣儀紫寧回隊(duì)'
                    ],
            }
        },
        template:`
                <div>
                新浪微博熱搜：
                <slot :news='news'></slot>
                </div>
                `
    })
    var vm = new Vue({
        el:'#app',

    })
</script>

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

clipboard.png

回答
編輯回答
帥到炸

因?yàn)?code>slot-scope僅暴露出來(lái)一個(gè)scope對(duì)象，并不以你的命名轉(zhuǎn)移
也許是因?yàn)橹挥幸粋€(gè)屬性讓你看起來(lái)有點(diǎn)繞，看下面這個(gè)例子也許能讓你更容易理解一些

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

你如果想讓代碼更直觀一點(diǎn)，可以直接結(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