插槽到底是个啥？5分钟搞定
Vue 插槽
插槽的基本使用
组件使用slot标签，显示组件标签的内容
Title
aaa
Vue.component('child1', {
template: <div>
首页
<slot></slot>
</div>,
})
var vm = new Vue({
el: '#box',
})
具名插槽
通过在标签内使用slot属性指定值，组件内使用solt标签通过name接收slot属性值
Title
pppp
bbbb
Vue.component('navbar', {
template: <div>
<slot name="a"></slot>
navbar
<slot name="b"></slot>
</div>,
})
var vm = new Vue({
el: '#box',
data:{
}
})
总结
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 插槽
-写内容---》如果定义了插槽---》替换到插槽中
-具名插槽---》给插槽名名字---》使用的时候，指定替换哪个插槽的内容
Original: https://www.cnblogs.com/48xz/p/16156656.html
Author: HammerZe
Title: Vue 插槽
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/596598/
转载文章受原作者版权保护。转载请注明原作者出处！