标签：Vue cpn 作用域 插槽 app js 组件 data
1.1 为什么使用slot
组件的插槽
组件的插槽也是为了让封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。
slot基本使用
在子组件中，使用特殊的元素
该插槽插入什么内容取决于父组件如何使用。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot-插槽的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<cpn></cpn>
<cpn><span>php是最好的语言!!!</span></cpn>
<cpn><i>python一出，谁与争锋!!</i></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<p>我是子组件模板</p>
<!--设定默认值-->
<slot><button>按钮</button></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!'
},
components: {
cpn:{
template:'#cpn'
}
}
})
</script>
</body>
</html>
执行结果
1.2 具名插槽slot
当子组件的功能复杂时，子组件的插槽可能并非是一个。
- 比如封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
- 外面在给插槽插入内容时，如何区分插入的是哪一个呢？这个时候，就需要给插槽起一个名字。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具名插槽的使用</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<cpn><span slot="center">标题</span></cpn>
<cpn><button slot="left">返回</button></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!'
},
components: {
cpn: {
template: '#cpn'
}
}
})
</script>
</body>
</html>
执行结果
1.3 编译作用域
父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编译的作用域</title>
</head>
<body>
<div id="app">
<!--使用变量时，先看在哪个模板里面-->
<cpn v-show="isShow"></cpn>
<!-- <cpn v-for="item in names"></cpn> -->
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<p>我是内容, 哈哈哈</p>
<!-- <button v-show="isShow">按钮</button> -->
</div>
</template>
<script src="../js/vue.js"></script>
<script>
/*实例*/
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
},
/*组件*/
components: {
cpn: {
template: '#cpn',
data() {
return {
isShow: false
}
}
},
}
})
</script>
</body>
</html>
执行结果
1.4 作用域插槽
父组件替换插槽的标签，但是内容由子组件来提供。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
</head>
<body>
<!--作用域插槽: 父组件替换插槽的标签，但是内容由子组件来提供-->
<div id="app">
<cpn></cpn>
<!--<!–目的是获取子组件中的starts–>
<cpn>
<!–方式1–>
<template slot-scope="slot">
<span v-for="item in slot.data">-{{item}}</span>
</template>
</cpn>-->
<!--目的是获取子组件中的starts-->
<cpn>
<!--方式2-->
<template slot-scope="slot"><!--引用插槽对象-->
<span>{{slot.data.join(' - ')}}</span>
</template>
</cpn>
</div>
<!--子组件模板-->
<template id="cpn">
<div>
<!--子组件传递给父组件-->
<slot :data="starts">
<ul>
<li v-for="item in starts">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!'
},
components: {
cpn: {
template: '#cpn',
data(){
return {
starts: ['kobe', 'Jmaes', 'Curry', 'Duncan']
}
}
}
}
})
</script>
</body>
</html>
执行结果
标签：Vue,cpn,作用域,插槽,app,js,组件,data 来源： https://www.cnblogs.com/guardwhy/p/15477443.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。