html对接数据库 html5连接mysql数据库

(十八)补充-Vue3中插槽的使用

在子组件中写插槽标签slot给slot添加name属性。

（比如下面的导航栏1和导航栏3）在子组件中，使用特殊的元素slot就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。

通过scope.xxx就可以使用绑定数据了 作用域插槽：v-slot的用法 Vue0中使用v-slot指令取代了特殊特性slot与slot-scope，但是从上述案例可以看出，v-slot在使用时，需要在template标签内，这点大家在应用时要注意。

这篇文章主要介绍了Vue中的slot使用插槽分发内容的方法，现在分享给大家，也给大家做个参考。slot slot标签，简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。

我们可以使用slot插槽来编写组件，slot用来分发内容到子组件中，从而实现组件的高度复用，编写的组件更加灵活。

vue3可以用vue2的语法吗

1、不用。传统的vue2是OptionsApi，Vue3语法是CompositionApi，传统的Vue2逻辑比较分散，可读性不好，可维护性也不好，对比Vue3语法，更加的逻辑分明，可维护性也高。

2、Vue3 的 v-model 相对 Vue2 来说 ，有了较大的改变。可以使用多 model ，相应语法也有变化。

3、最好使用单引号。Vue 2的写法在3里依然可用，而且更贴近原生，可以说是标准写法，而Vue 3实际上是2的语法糖。方便程度上说，Vue 3的肯定更方便。由于使用CSS变量，所以IE全不支持，老内核Edge全不支持。

4、defineProperty() 是可以监听数组的， key 是角标， value 是元素值。

5、在Vue2中，无论在哪里创建Vue实例，都只需要调用Vue.component方法来注册全局组件。在Vue3中，由于创建Vue实例的工作方式略有不同(使用createApp)，所以代码略有不同，但理解起来同样简单。

6、语法不同 vue2使用的是webpack形式去构建项目，vue3使用vite构建项目。获取props方式不同 vue2在script代码块可以直接获取props，vue3通过setup指令传递。

vue3中插槽slot的使用

在子组件中写插槽标签slot给slot添加name属性。

作用域插槽：slot-scope使用：在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。在组件使用时，通过slot-scope=“scope”，接收组件中slot标签上绑定的数据。

slot\ ， data： function () { return { } } })； new Vue({ el：app， data：{ msg：你好啊 } }) 组件中的模板中写入slot标签，在父级调用子组件的时候传入html即可。

父组件template标签上的v-slot指令与子组件的slot标签的name属性，通过绑定一样的值，形成一一对应的关系。