VUE学习笔记:12.组件化之:slot组件插槽讲解

1.为什么需要使用slot

VUE学习笔记:12.组件化之:slot组件插槽讲解_第1张图片
VUE学习笔记:12.组件化之:slot组件插槽讲解_第2张图片

  • 我们自定义的组件往往需要在很多不同的页面中使用。而且在不同的页面中使用时,组件也不是一成不变的,而是同一组件在不同地方使用时展示的内容也稍有不同。
  • 要实现以上需求就不能在定义组件时把展示的内容写死,而是在组件中定义出插槽。当我们在使用组件再决定组件具体需要展示哪些内容。
  • 一般在定义组件时,我们将共性的内容写死在组件中。而可能改变的内容封装为插槽。

2.slot的基本使用

  • 在定义子组件时,将不确定的内容抽取为slot。
    <template id="script_template">
    	<div>
    		<h3>我是子组件h3>
    		
    		<slot><h3>我是默认值h3>slot> 
    	div>
    template>
    
  • 在使用子组件时,决定slot插槽的内容
    <div id="app1">
    	
    	<mycpnc>mycpnc>
    	<mycpnc><h3>我是哈哈哈h3>mycpnc>
    div>
    

案例:

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app1">
	
	<mycpnc>mycpnc>
	<mycpnc><h3>我是哈哈哈h3>mycpnc>
div>


<template id="script_template">
	<div>
		<h3>我是子组件h3>
		<slot><h3>我是默认值h3>slot>
	div>
template>


<script src="../vue.js">script>

<script>
    let app = new Vue({
       
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
		//使用语法糖方式注册局部组件
		components: {
       
			'mycpnc':{
       
				template: '#script_template'
			}
		}
    })
script>
body>
html>

效果如下:
VUE学习笔记:12.组件化之:slot组件插槽讲解_第3张图片

3.slot具名插槽的使用

当我们在定义子组件时,如果设置了多个slot插槽,那么再使用时就会有一个问题:如何设置每个插槽的值呢?这就需要用到我们的具名插槽了。

VUE学习笔记:12.组件化之:slot组件插槽讲解_第4张图片

具名插槽的使用步骤:

  • 在定义子组件时,将不确定的内容抽取为slot,并给slot标签设置name属性。
    <template id="script_template">
    	<div>
    		<slot name="above"><h3>上面h3>slot>
    		<slot name="intermediate"><h3>中间h3>slot>
    		<slot name="follow"><h3>下面h3>slot>
    	div>
    template>
    
  • 在使用子组件时,决定slot插槽的内容。
    <div id="app1">
    	
    	<mycpnc>
    		
    		<h3 slot="follow">嘿嘿嘿h3>
    		<h3 slot="intermediate">嘻嘻嘻h3>
    	mycpnc>
    div>
    

案例:

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app1">
	
	<h1>第一个插槽h1>
	<mycpnc>mycpnc>
	<h1>第二个插槽h1>
	<mycpnc><h3 slot="above">哈哈哈h3>mycpnc>
	<h1>第三个插槽h1>
	<mycpnc>
		<h3 slot="follow">嘿嘿嘿h3>
		<h3 slot="intermediate">嘻嘻嘻h3>
	mycpnc>
div>


<template id="script_template">
	<div>
		<slot name="above"><h3>上面h3>slot>
		<slot name="intermediate"><h3>中间h3>slot>
		<slot name="follow"><h3>下面h3>slot>
	div>
template>


<script src="../vue.js">script>

<script>
    let app = new Vue({
       
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
		//使用语法糖方式注册局部组件
		components: {
       
			'mycpnc':{
       
				template: '#script_template'
			}
		}
    })
script>
body>
html>

效果如下:
VUE学习笔记:12.组件化之:slot组件插槽讲解_第5张图片

4.slot作用域插槽的使用

(1)什么是编译作用域

VUE学习笔记:12.组件化之:slot组件插槽讲解_第6张图片

(2)作用域插槽的使用

  • 作用域插槽可以简单理解为我们在使用子组件时,如果需要使用子组件中的数据来设置子组件中slot插槽的内容,那么就需要使用作用域插槽了。
  • 作用域插槽的本质是:
    • 1.在定义子组件插槽时,给slot标签设置自定义属性(dmsg),并使用v-on将属性值绑定为子组件的数据。
    • 2.在使用子组件并设置插槽具体内容时,可以使用slot-scope="myslot"将子组件的slot对象传递给变量myslot。
    • 3.在父组件中就可以使用myslot.dmsg来获取子组件的数据

作用域插槽的使用步骤:

  • 在定义子组件时,将不确定的内容抽取为slot,并给slot标签设置一个属性,使用v-on将属性值绑定为子组件中的数据
    <template id="script_template">
    	<div>
    		
    		
    		<slot :dmsg="message" name="aaa">
    			<h3>我是默认值h3>
    		slot>
    	div>
    template>
    
  • 在使用子组件,决定slot插槽的内容时,可以使用slot-scope="myslot"来获取子组件中的slot对象。
    <div id="app1">
    	
    	<mycpnc>
    		
    		
    		<template slot-scope="myslot" slot="aaa">
    			<h3>{
          {myslot.dmsg}}h3>
    		template>
    	mycpnc>
    div>
    

案例:

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>
<body>
<div id="app1">
	
	<mycpnc>
		<template slot-scope="myslot" slot="aaa">
			<h3>{
    {myslot.dmsg}}h3>
		template>
	mycpnc>
	
	<mycpnc>mycpnc>
div>


<template id="script_template">
	<div>
		<slot :dmsg="message" name="aaa">
			<h3>我是默认值h3>
		slot>
	div>
template>


<script src="../vue.js">script>

<script>
    let app = new Vue({
       
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
		//使用语法糖方式注册局部组件
		components: {
       
			'mycpnc':{
       
				template: '#script_template',
				data:function(){
       
					return {
       
						message: '哈哈哈'
					}
				}
			}
		}
    })
script>
body>
html>

效果如下:
VUE学习笔记:12.组件化之:slot组件插槽讲解_第7张图片

你可能感兴趣的:(vue学习笔记,vue,前端)