<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 获取子组件插槽里面的 数组----数据-->
<div id="app">
<comp> </comp>
<comp>
<!-- 在父组件内部使用子组件,通过插槽拿到数据的写法 -->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}}</span>
</template>
</comp>
<comp>
<!--父组件替换插槽里面的内容,但是内容还是有子组件提供,,=-------也就是说:子组件可以通过插槽传递数据 -->
<template slot-scope="slot">
<span >{{slot.data.join("-")}}</span>
</template>
</comp>
</div>
<template id="tem">
<!-- //在子组件内接收值 -->
<div>
<h2>我是子组件</h2>
<!-- 在子组件内部定义插槽的数据 -->
<slot :data="list">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
const comp={ //创建子组件
template:"#tem", //挂在子组件模板
props:{ //子组件接受父组件的值
},
data(){ //必须是一个函数
return {
meesage:'我是社会主义接班人',
list:["js编程","编程人生","前端优化","c++","python","java"]
}
},
methods: {
}
}
const app = new Vue({
el: '#app',//用于要挂在的元素
data: {
what: '你好啊,黄金时代',
},
components:{ //挂载子组件到父组件上面
comp,
},
methods: {
},
});
</script>
</body>
</html>
记录一下======================================