Vue学习笔记4.6 插槽用法slot

男娘i 2022-03-22 13:26 173阅读 0赞

依然是看注释的12345点

<!DOCTYPE html>
    <html>
    <head>
    	<title>插槽</title>
    	<script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		
    		
    		
    		<contents>
    			
    			<div slot="Dell">Dell</div>
    			<div slot="World">World</div>
    		</contents>
    	</div>
    </body>
    <script>
    	Vue.component('contents', {
    		// props:['contents1'],
    		
    		
    		// template: `<div>
    		// 				
    		// 				<slot></slot>
    		// 				
    		// 				<div v-html="this.contents1"></div>
    		// 				<p>Hello</p>
    		// 		   </div>`
    		// 		   
    		template: `<div>
    						
    						<slot name="Dell">Hello World</slot>
    						<p>Hello</p>
    						<slot name="World">Hello World</slot>
    						
    						<slot name="11111">Hello World</slot>
    				   </div>`
    	})
    	var vm = new Vue({
    		el: '#app'
    	})
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue插槽 Slots

一、插槽是什么？插槽就是子组件中的提供给父组件使用的一个占位符，用`<slot></slot>` 表示, 父组件可以在这个占位符中填充任何模板代码，如 HTML、组

╰+哭是因爲堅強的太久メ/ 2023年10月07日 23:37/ 0 赞/ 22 阅读

相关 Vue 插槽（slot）

我们经常需要使用插槽分发内容。在使用组件时，我们常常要像这样组合它们： <app> <app-header></app-header> <

港控/mmm°/ 2023年05月31日 12:05/ 0 赞/ 33 阅读

相关 vue 插槽（slot）

> slot在使用时：`<slot name="slotName"></slot>` > 在组件中定义时：`<template v-slot:slotName></temp

港控/mmm°/ 2023年02月20日 07:19/ 0 赞/ 48 阅读

相关 vue slot插槽

一、介绍：slot可以理解为占位符，在子组件中给父组件站位。二、举例说明： 1、没有插槽：（1）父组件： <template> <div>

墨蓝/ 2022年12月27日 01:30/ 0 赞/ 256 阅读

相关 Vue slot插槽

我们对于slot这个概念或许不是很清楚，但是我们在实际的使用中可能已经遇到很多次了。比如我们在使用ivew组件库的时候，就会经常遇到slot这个单词。而实际上，slot的使用更

一时失言乱红尘/ 2022年05月12日 12:38/ 0 赞/ 282 阅读

相关 Vue-slot插槽

1、插槽内容 ![20190125111259437.png][] <script src="https://cdn.jsdelivr.net/npm/vue

忘是亡心i/ 2022年04月23日 07:56/ 0 赞/ 334 阅读

相关 Vue学习笔记4.6 插槽用法slot

依然是看注释的12345点 <!DOCTYPE html> <html> <head> <title>插槽</title> <sc

男娘i/ 2022年03月22日 13:26/ 0 赞/ 174 阅读

相关 Vue学习笔记（十）——slot插槽（PART1）

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 首先简单说明一下slot插槽的应用场景：

布满荆棘的人生/ 2022年02月23日 13:56/ 0 赞/ 227 阅读

相关 vue 插槽 slot

\[vue\] 插槽 slot  <div data-note-content="" class="show-conte

小咪咪/ 2022年01月20日 05:34/ 0 赞/ 356 阅读

相关学习下vue的slot插槽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

缺乏、安全感/ 2021年09月19日 08:12/ 0 赞/ 256 阅读