【Vue】—插槽的基本语法

<template><div><h1>这是父级</h1><Son><div><p>name:插槽</p><p>info:子级组件需要接收我，使用slot</p></div></Son></div>
</template><script>import Son from './Son';export default {components: {Son}}
</script><style></style>

<template><div><h3>这是子级组件</h3><!-- slot标签：接收插槽内容 --><slot></slot></div>
</template><script>export default {}
</script><style></style>

<template><div><h1>这是父级</h1><Son><div><p>name:插槽</p><p>info:子级组件需要接收我，使用slot</p><p>{{count}}</p><button @click='clickme'>点我一下</button></div><template v-slot:head>
<div><h2>这是头部</h2>
</div></template>
<template v-slot:foot></template>
<div><span>这是尾巴</span>
</div></Son></div>
</template><script>import Son from './Son';export default {data() {return {count: 99}},components: {Son},methods: {clickme() {console.log('点点点');}}}
</script><style></style>

<template><div><h3>这是子级组件</h3><!-- slot标签：接收插槽内容 --><div><slot class="head">
<slot name='head'></slot></slot></div><div class="moren"><!-- 匿名插槽 --><slot></slot></div><div class="foot"><slot name='foot'></slot></div></div>
</template><script>export default {data() {return {count: 55}},methods: {clickme() {console.log('son son son');}}}
</script><style></style>

【Vue】—插槽的基本语法相关推荐

vue插槽样式_vue 插槽简介及使用示例
Vue的插槽,是一种内容分发机制,但是我感觉它更加像组件的一种占位符的概念,通过插槽,等待组件外部传入复杂的内容. 使用插槽的好处在以前的例子中todo-item插槽直接写在了todo-list插槽 ...
vue 插槽scope_Vue 插槽
一.概念要了解 slot 插槽 , 首先需要了解自定义组件,以及组件中的模板举例: 自定义一个组件名 tag1 //组件模板为 var tag1mes = { template:` 狮子是一种生 ...
vue插槽样式_Vue 插槽(slot)使用(通俗易懂)
因为在2.6.0中,具名插槽和作用域插槽引入了一个新的统一的语法 (即v-slot 指令).它取代了 slot 和 slot-scope,并且现在网上都说的是一些老版本的内容,官方文档不太容易理 ...
一次性讲明白vue插槽slot
详解vue中的插槽slot 一.前言二.插槽是什么三.插槽的作用三.插槽的分类 1.默认插槽 2.具名插槽 3.作用域插槽以下文章来自掘金作者:JH30K 链接:https://juejin ...
vue插槽 - slot
vue插槽 - slot 前言一.插槽内容二.编译作用域三. 后备内容四. 具名插槽五. 作用域插槽 1. 基本用法 2. 独占默认插槽的缩写语法 3. 解构插槽Prop 六. 动态插槽名 ...
vue 插槽scope_Vue插槽原理与用法详解
本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将元素作为 ...
vue插槽--slot
2019独角兽企业重金招聘Python工程师标准>>> vue插槽--slot,在很多三方的UI框架里大量的使用了插槽,像现在用的比较多的饿了么的ElementUI 在这里有自己写的 ...
Vue中如果关闭语法检查
Vue中如果关闭语法检查在Vue中随便写一个变量,没有使用就会报错,太烦了. == 只需在vue.configs.js文件中配置一下就行了== const { defineConfig } = r ...
Vue中如何关闭语法检查
Vue中如何关闭语法检查首先先创建一个js文件,不可以改名字,就叫vue.config.js vue.config.js中的内容 module.exports={pages:{index:{//入口 ...

【Vue】—插槽的基本语法

【Vue】—插槽的基本语法

【Vue】—插槽的基本语法相关推荐

最新文章

热门文章