vue作用于插槽,vue中插槽的用法

　　简介：在Vue开发中，我们大多采用组件开发。组件开发最大的特点就是页面的结构化划分和组件的重用。在实践中，页面对组件的需求可能略有不同，所以需要一个需求：为页面定制组件，解决方案是通过插槽。

　　实例：

　　template id= myCpn div class= wrapper h1自定义组件/h1 h2组件内容/H2/div/templatebodydivid= app CPN/CPN CPN/CPN/CPN/div/body script Vue . component( CPN ，{ template: # myCpn })var VM=new Vue({ El: # app })/script

　　运行上面的代码结果：

　　描述：页面使用了多个自定义组件(样式代码省略)，为了描述方便添加了序列号，每个序列号指向一个自定义组件。这个组件的样式和内容在创建之初就已经设计好了，所以在不同页面调用或者在同一页面多次调用时，样式和内容都是一样的。

　　要求：希望组件2的内容显示为按钮，组件3的内容显示为链接。

　　解决方案：也许第一个想到的是重写一个符合要求的组件2和组件3，但这显然很麻烦，代码也太冗余。在这里，只需参考槽位即可解决。

　　代码显示：

　　template id= my CPN div class= wrapper h1自定义组件/h1 slot/slot/div/template body div id= app CPN H2组件内容/H2/cpncn button按钮/button/Ncpn a rel= external no follow rel= external no follow href= # link/a/CPN/div/body运行结果：

　　通过定义组件，将需要按需更改的部分替换为槽标签，然后在使用组件时添加所需的元素。最后，这个元素将在渲染时替换模板中的槽。以上也是插槽最基本的应用方法。

　　概念：slot，即Slot，是一个组件的HTML模板。该模板是否显示以及如何显示由父组件决定。

　　槽分类：缺省槽缺省槽，也称为单槽和匿名槽。它可以放在组件中的任何位置，但是一个组件只能包含一个默认槽，并且没有设置它的name属性。

　　简介中的示例使用默认插槽。除了上面显示的基本用法，默认插槽还可以定义插槽的默认值，所以前面的代码也可以写成这样：

　　template id= my CPN div class= wrapper h1自定义组件/h1插槽！-定义slot的默认值- h2组件内容/H2/slot/div/templatebodydiv id= app CPN/cpncpn button/button/Cpcpn a rel= external no follow rel= external no follow href= # link/a/CPN/div/body还有一点就是前面展示的所有组件都只包含一个元素，但实际上组件内部可以写多个元素，然后可以统一替换模板中的槽。

　　命名槽命名槽，很好理解，就是给匿名槽加一个name属性。此外，命名槽可以在一个组件中出现多次，并且可以出现在任何地方。

　　理解为什么要有具名插槽：

　　示例：执行以下代码(样式省略)

　　template id= my CPN div class= wrapper h1自定义组件/h1 slot span头/span内容/span尾/span/slot/div/templatebodydiv id= app CPN/CPN/div/body运行结果：

　　可以看到，我们在插槽中引入了三个部分。如果有三个页面只是需要分别修改(比如把中文改成英文)。如果只依赖单个槽，就需要写三个类似的代码，都包含了另外两个不需要修改的部分的代码，这样就会导致代码冗余。所以需要一种方法，只修改需要改变的部分。在这里，您可以通过命名插槽来修改它。

　　修改：

　　当定义组件引入槽时，为每个部分添加一个带有name属性的槽。

　　template id= my CPN div class= wrapper h1 custom component/h1 slot name= header span头部分/span/slot name= content span内容部分/span/slot slot name= tail span尾部分/span /slot /div/template有一个已命名的槽。以后修改页面时，可以根据name属性修改指定的部分。

　　div id=app cpn span slot=header 头节/span /cpn cpn span slot=content 内容部分/span/CPN CPN span slot= tail span/CPN/div的尾节/执行结果：为了简单起见，这里只多次引用同一个组件实例，但在多个页面上不引用，但其用法和生成的结果是一样的。

　　范围槽范围槽是父组件的替换槽标签，子组件决定显示内容。

　　理解作用域插槽：

　　示例：

　　存在已有的父子组件，子组件有一组数据。根据页面的不同需求，希望子组件的数据以列表形式横向展示。

　　Scriptvue.com组件( CPN ，{template: # MyCPN ，data(){ return {//data to be display by sub components显示数据：[c ， Java ， Python]}，})var vm=new vue({ El: # app })/script注意：这里可以把vm实例理解为父组件，所以根据Vue实例创建的全局组件作为VM的子组件，

　　这里的父组件根据需求设置数据表示的样式。

　　//父组件部分div id=app ！-列表显示- cpn！-slot-scope= lists 用于声明插槽对象-模板slot-scope= lists ul！-根据slot object-Li v-for= iteminlists . data { { item } }/Li/ul/template/CPN获取slot绑定的数据！-水平显示-CPN模板slot-scope= lists span v-for= item in lists . data“{ item } }/span/template/CPN/div

　　数据绑定的组成部分。

　　//子组件part的模板= MyCPN div class= wrapper自定义组件/h1 slot:data= show data /slot/div/Template

　　运行结果显示：

　　根据示例流程，我们可以理解作用域槽，因为父组件在设置样式时不能直接访问子组件的数据。通过引入slot对象，这个对象在定义的时候就和子组件的数据绑定了，这样我们以后就可以访问我们需要的数据了。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。