scope：父组件拿到子组件的数据并设置子组件显示的样式
2019-06-02 本文已影响0人
coffee1949
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scope</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<hd1 :lists='goods'>
<!-- 这个scope必须写在template标签上 -->
<!-- 第二步：在template标签上使用scope属性把数据拿到 -->
<template scope='a'>
{{a}}
<!-- 拿到子元素数据可以自定义样式 -->
<h2 style="color: red;">{{a.fields.title}}</h2>
</template>
</hd1>
</div>
<!-- 子组件模板 -->
<script type="text/x-template" id='hd1'>
<div>
<!-- 第一步把数据绑到slot的fields上 -->
<slot v-for='v in lists' :fields='v'></slot>
</div>
</script>
<script type="text/javascript">
//子组件
var hd1 = {
template: '#hd1',
props: ['lists']
}
// 根组件
var app = new Vue({
data: {
goods: [
{title: '苹果'},
{title: '香蕉'},
{title: '橘子'}
]
},
components: {hd1}
}).$mount('#app');
</script>
</body>
</html>
