您的位置:首页 > Web前端 > Vue.js

Vue 插槽

2022-04-17 18:18 966 查看 https://www.cnblogs.com/48xz/p

Vue 插槽

插槽的基本使用

组件使用slot标签,显示组件标签的内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 不使用插槽写的aaa不会显示,使用就会显示-->
<child1>aaa</child1>

</div>
</body>
<script>

Vue.component('child1', {
template: `<div>
首页
<slot></slot>
</div>`,

})
var vm = new Vue({
el: '#box',

})
</script>
</html>

具名插槽

通过在标签内使用slot属性指定值,组件内使用solt标签通过name接收slot属性值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--    具名插槽,把p标签给a插槽,div标签给b插槽-->
<navbar>
<p slot="a">pppp</p>
<div slot="b">bbbb</div>
</navbar>
</div>
</body>
<script>
Vue.component('navbar', {
template: `<div>
<slot name="a"></slot>
navbar
<slot name="b"></slot>
</div>`,

})
var vm = new Vue({
el: '#box',
data:{

}

})
</script>
</html>

总结

# 1 计算属性
-computed--->把方法变成属性---》延缓计算
-在页面中直接使用函数,页面只要刷新,函数就会重新运行,使用计算属性--》只有当前函数使用的变量发生变化时,才重新运算

# 2 监听属性
-watch:属性----》只要这个变量发生变化,就会执行方法

# 3 组件化开发
-局部组件:写在组件内部:Vue.components
-全局组件:Vue.component()
-组件有自己的html,css,js,相互不影响
-template 一定要放在一个标签中
-data必须是函数data(){retrun {} }
-各级组件的data数据是不共享的

# 4 组件间通信
-通过自定义属性:父传子---》自定义的属性写在自定义的组件上---》props:['自定义属性名']
-通过自定义事件:子传父---》子中调用this.$emit('自定义事件名',参数,参数)--》触发写在定义组件上的 @自定义事件名='函数'---》函数执行(父组件)
-ref属性:
放在普通标签---》通过this.$refs.属性值---》原生dom
放在组件上---》通过this.$refs.属性值---》当前组价对象---》拿到组件中的值,执行组件中的方法

# 5 动态组件
-多个组件切换,通过动态组件的is来决定显示哪个组件
-keep-alive:组件切换的时候不销毁

# 6 插槽
-<组件>写内容</组件>---》如果定义了插槽---》替换到插槽中
-具名插槽---》给插槽名名字---》使用的时候,指定替换哪个插槽的内容
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: