在scope怎麼使用vue
- php中世界最好的语言原創
- 2017-12-31 10:27:502147瀏覽
這次帶給大家的是，在scope怎麼使用vue，我們都知道vue slot插槽可以傳遞任何屬性或html元素，但是在呼叫元件的頁面中我們可以使用template scope="props"來取得插槽上的屬性值，取得到的值是一個物件，這篇文章就給大家好好分析一下。
上面已經說了 scope獲取到的是一個對象，是什麼意思呢？我們先來看一個簡單的demo就可以明白了~
<!DOCTYPE html>
<html>
<head>
<title>Vue-scope的理解</title>
<script src="./libs/vue.js"></script>
<link rel="stylesheet" href="./css/index.css" rel="external nofollow" />
<script src="./js/scope.js"></script>
</head>
<body>
<div id="app">
<tb-list :data="data">
<template scope="scope">
<div class="info" :s="JSON.stringify(scope)">
<p>姓名:{{scope.row.name}}</p>
<p>年龄: {{scope.row.age}}</p>
<p>性别: {{scope.row.sex}}</p>
<p>索引：{{scope.$index}}</p>
</div>
</template>
</tb-list>
</div>
<script id="tb-list" type="text/x-template">
<ul>
<li v-for="(item, index) in data">
<slot :row="item" :$index="index"></slot>
</li>
</ul>
</script>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
data: [
{
name: 'kongzhi1',
age: '29',
sex: 'man'
},
{
name: 'kongzhi2',
age: '30',
sex: 'woman'
}
]
}
},
methods: {
}
});
</script>
</body>
</html>js 程式碼如下：
Vue.component('tb-list', {
template: '#tb-list',
props: {
data: {
type: Array,
required: true
}
},
data() {
return {
}
},
beforeMount() {
},
mounted() {
},
methods: {
}
});從上面回傳的scope屬性值我們可以看到，scope傳回的值是slot標籤上傳回的所有屬性值，並且是一個物件的形式保存起來，該slot有兩個屬性，一個是row，另一個是$index, 因此回傳 {"row": item, "$index": "index索引"}; 其中item就是data裡面的一個個物件。
相信看了以上介紹你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是在scope怎麼使用vue的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn