Vue 插槽

Vue 插槽

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>

image-20220417181333503

具名插槽

通过在标签内使用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 插槽
		-<组件>写内容</组件>---》如果定义了插槽---》替换到插槽中
  	-具名插槽---》给插槽名名字---》使用的时候，指定替换哪个插槽的内容
posted @ 2022-04-17 18:18  HammerZe  阅读(73)  评论(0)  编辑  收藏  举报