第十章：动态组件，插槽，自定义指令

最新推荐文章于 2024-05-28 16:22:58 发布
最新推荐文章于 2024-05-28 16:22:58 发布
阅读量412 收藏 1
点赞数 1
分类专栏： 前端技术 文章标签： vue.js javascript 前端
本文链接：https://blog.csdn.net/zhangchen124/article/details/125295978
版权

第十章：动态组件，插槽，自定义指令

本章任务

  1. 动态组件
  2. 插槽
  3. 自定义指令
  4. vant UI 组件库
  5. axios的配置

本章内容

  • 动态组件
  • 自定义指令

一、动态组件

1.1 什么是动态组件

概念：动态组件就是可以动态改变的组件，之前我们引入组件，都是把组件固定写在某一个位置显示，没有办法切换组件显示，动态组件可以帮我们完成这个目的。vue中提供了一个组件<component/>来动态的完成组件的切换， 不需要我们自己去封装。

1.2 动态组件的使用

  1. 父组件中导入并注册子组件

    	//导入需要动态切换的 两个子组件	
	import com01 from '../components/Com01.vue'
	import com02 from '../components/Com02.vue'
	export default{
		name:"about",
        //注册子组件
		components:{
			com01,com02
		},
	}

  2. 在父组件中通过<component is>内置组件的:is属性，使用子组件

    直接写is相当于直接写死 一个组件的名称，可以使用v-bind 的:is属性来完成动态的组件切换效果。
<template>
  <div class="about">
    <h1>This is an about page</h1>
	<button  @click="changeCom()">切换组件</button>
	<component :is="comName"></component>
  </div>
</template>

存在问题： 此时虽然可以动态切换组件，但是存在问题，组件的切换其实就是组件的销毁并重新创建，此时会导致再次切换回来无法保证原来的组件中的数据信息。可以通过生命周期函数验证。

com01.vue组件：

<template>
	<div class="box">
		<h1>这里是组件01</h1>
		<p>{{num}}</p>
		<button type="button" @click="add">点击增加</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				num:0
			}
		},
        methods:{
			add(){
				this.num+=1;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	h1{
		background-color: blue;
		color: white;
	}
</style>

com02.vue组件：

<template>
	<div class="box">
		<h1>这里是组件02</h1>
		<p>{{num}}</p>
		<button type="button" @click="add">点击增加</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				num:0
			}
		},
        methods:{
			add(){
				this.num+=1;
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	h1{
		background-color: red;
		color: white;
	}
</style>

about.vue父组件：

<template>
  <div class="about">
    <h1>This is an about page</h1>
	<button  @click="changeCom()">切换组件</button>
	<component :is="comName"></component>
  </div>
</template>
<script>
	import com01 from '../components/Com01.vue'
	import com02 from '../components/Com02.vue'
	export default{
		name:"about",
		components:{
			com01,com02
		},
		data(){
			return {
				comName:'com01',
				comList:['com01','com02']
			}
		},
		methods:{
			changeCom(){
				let i = this.comList.findIndex(item=>{
					return item == this.comName
				})
				if(i==0){
					//console.log(this.comList[1])
					this.comName = this.comList[1]
				}
				if(i==1){
					this.comName = this.comList[0]
				}
			}
		}
	}
	
</script>
<style type="text/css">
	
</style>

1.3 使用 keep-alive 解决上述问题

keep-alive可以保证在组件切换时 不被销毁,处于缓存状态，从而保证数据的完整性。

代码实现：使用<keep-alive></keep-alive>把<component :is=''></component>包括起来就可以了。

	<keep-alive>
		<component :is="comName"></component>
	</keep-alive>

1.4 keep-alive的生命周期函数和属性props

1.4.1 生命周期函数

keep-alive缓存组件有两个生命周期钩子函数，分别是：

  • activated 组件被激活时调用
  • deactivated 组件被缓存时调用
<template>
	<div class="box">
		<h1>这里是组件01</h1>
		<p>{{num}}</p>
		<button type="button" @click="add">点击增加</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				num:0
			}
		},
		methods:{
			add(){
				this.num+=1;
			}
		},
        //定义keep-alive组件的生命周期函数
		activated() {
			console.log('com01组件被激活了');
		},
		deactivated() {
			console.log('com01组件被缓存了');
		}
	}
</script>

<style lang="less" scoped="scoped">
	h1{
		background-color: blue;
		color: white;
	}
</style>
1.4.2 keep-alive属性
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
	<keep-alive include="com01,com02">
		<component :is="comName"></component>
	</keep-alive>

**注意：**include和exclude两个属性不能同时使用。

二、插槽 slot

2.1 slot简介 v-slot

slot是插槽（槽口）的意思，其目的在于让组件的 可扩展性 更强，用来混合父组件的内容与子组件自己的模板

#例如：需要在组件中插入一些内容
<alert-box>
  Something bad happened.
  ul
	li
</alert-box>

#定义组件模版时
<template id="ab">
    <div class="demo-alert-box">
      //调用组件时，插入的内容会显示在模版中的这个位置
      <slot></slot>
    </div>   
</template>

Vue.component('alert-box', {
  template:'#ab'
})

2.2 使用场景和分类

在组件化开发中，虽然组件是一样的，但是在不同的使用场景组件的一部分内容需要有不同的内容显示

2.2.1 分类
  • 匿名slot
  • 具名slot
2.2.2 匿名插槽

匿名插槽：从字面意思来理解是就是没有名字的插槽，特点就是可以放任何你放的东西。

**注意：**此时的插槽不是真的没有名字，而是名字默认为 ‘default’ ====> <slot name='default'></slot>

<template id="mycomponent">
    <div>
        <p>头部区域</p>
        <slot>如果没有分发内容，则显示默认提示</slot>
        <p>底部区域</p>
    </div>
</template>
<mycomponent>
    <span>可以防止任何内容</span>
</mycomponent>
2.2.3 具名插槽

假设我们的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，我们不可能把显卡插到内存的位置上，具名slot也就是每个slot都有名字，不能随意替换，对应插入

vue2.6之前的版本：
	<div id="app">
        <first>
            <!-- 这里的内容就相当于插头 slot就连接组件中的插槽 -->
            <ul slot="usb">
                <li>第1个li标签</li>
                <li>第2个li标签</li>
                <li>第3个li标签</li>
            </ul>
            <ul>
                <li>你好嘿嘿额1</li>
                <li>你好嘿嘿额2</li>
            </ul>
        </first>
    </div>
在组件模板中定义slot有名字的插槽 但是在使用时 也要带上插槽的名字。
    <template id="tem">
        <div>
            <p>你好哈哈哈哈</p>
            <!-- 定义插槽 name属性定义插槽的名字 -->
            <slot name="usb"></slot>
            <slot></slot>
        </div>
    </template>

vue2.6之后的版本：
<!--子组件模版-->
<template id="mycomponent">
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<!--调用子组件 向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
缩写：v-slot:header  ===     #header
-->
<mycomponent>
    <template v-slot:header>
        <h1>Here might be a page title</h1>
    </template>

    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
	v-slot的简写形式就是#
    <template #footer>
        <p>Here's some contact info</p>
    </template>
</mycomponent>
2.2.4 作用域插槽：借助插槽的子组件向父组件传值：

**场景：**子组件的数据需要到父组件，父组件使用子组件的数据进行一些列运算 再发送给子组件。

如果使用父子组件的通信：需要借助 自定义事件监听，props[]做数据传递，麻烦。

此时可以使用插槽来实现 子向父 再到 父向子做数据传递。

#com01.vue子组件中
<template>
	<div class="box">
		<h1>
			这里是组件01
			<slot name="aaa" msg='你好哈哈哈'></slot>
		</h1>
	</div>
</template>

#About.vue父组件中
<template >
	<!--使用子组件-->
	<com01>
    	<template v-slot:aaa='obj'>
			这是插槽插入的内容
			{{obj.msg}}
		</template>
    </com01>			
</template>
观察发现，在com01.vue子组件中的插槽内 定义了属性msg='你好哈哈哈'，在about.vue父组件中的<template>标签中通过v-slot:aaa='obj'指令中 可以通过obj来获取到 msg的属性的数据。同理，此时的msg是直接写死的内容，可以通过:msg把这个数据变成动态传递的。

**使用场景：**作用域插槽一般在封装组件时比较常用，在封装好的组件中，通过插槽预留数据位置，在使用组件时，只需要传入需要的数据就可以了。

课下改版购物车：把加减按钮单独提取成一个组件。

vant:组件库https://vant-contrib.gitee.io/vant/#/zh-CN

三、自定义指令

3.1 什么是自定义指令

概念： 在vue中内部提供的有很多v-系列的指令，例如 v-if v-model 等，都有特定的作用，但是如果我们有一些特殊的需求时，vue也支持我们可以自定义指令来完成一些功能的设置。

我们自己封装一个函数，给这个函数链接一个对应的名字 把这个名字当作指令来使用。

**分类：**主要有两种

  • 全局自定义指令
  • 局部(私有)自定义指令

3.2 为什么要用自定义指令

问题一：vue的内置指令干了什么？

​ 就是DOM操作，vue做DOM操作的方式 跟我们之前学习 原生js 自己写的代码是一样的。

问题二：自定义指令是干啥的？

​ 让我们自己操作DOM，按照我们自己的需求 就跟我们当年写原生js一样。 借助函数

vue的指令底层实际上就是调用函数，通过v-系列的指令调用对应的函数。

3.3 自定义指令的使用

完成案例：当输入框加载完成时，让输入框得到焦点。

全局自定义指令：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部自定义指令：

//所有的局部自定义指令放在这里。 只能再当前组件内部使用这个指令
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
指令的钩子函数以及参数对象：

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

    当数据发生更新时 就会调用。

在使用自定义指令时 如果我们想传递一些参数使用，此时在自定义指令的bind(el,binding)函数中可以进行参数接收

el：指令所绑定的元素，可以用来直接操作 DOM。

binding：一个对象，包含以下 property：

  • name：指令名，不包括 v- 前缀。 当有多个单词组成指令名字时，推荐使用‘ - ’ 连接多个单词
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  1. 对象式自定义指令

在vue实例中添加节点 directives 此节点专门用来定义私有自定义指令：

<template>
	<div class="box">
		<h1 v-aaa>
			这里是组件01
		</h1>
	</div>
</template>


//在directives属性下  可以定义私有自定义指令
		directives:{
			//此处的aaa就是自定义指令的名字
			aaa:{
				//当指令绑定到标签上时  会立即触发 bind事件
				bind(el){
					el.style.aaa = "green"
				}
			}
		}
注意：在上边代码中 aaa就是指令的名字  调用时 要加上v-   v-aaa就是此指令的全名
	在指令对象中要添加一个bind()函数  只要把指令添加到标签上，那么就可以自动触发 这个bind函数，括号中的el就是触发当前指令的元素DOM对象。

传递参数的自定义指令使用

<template>
	<div class="box">
		<h1 v-aaa="'blue'">
			这里是组件01
		</h1>
	</div>
</template>

//在directives属性下  可以定义私有自定义指令
		directives:{
			//此处的color就是自定义指令的名字
			color:{
				//当指令绑定到标签上时  会立即触发 bind事件
				//可以直接从binding的value属性中取到 指令的数据
				bind(el,binding){
					el.style.color = binding.value
				}
			}
		}

此时存在问题： 如果我们不是通过指令直接赋值，而是通过组件中的data数据来给指令进行赋值，此时，如果我们在指令绑定之后，再次修改了该data数据的值，此时 这个结果不会同步更新到DOM结构中。

使用update()方法 解决这个问题，该方法会在DOM结构更新时调用一次，就可以保证指令中的数据发生更新后 也可以把数据的结果同步更新到DOM结构中。

<template>
	<div class="box">
		<h1 v-color='yanse'>
			这里是组件01
			<button type="button" @click="yanse='pink'">点击按钮改变颜色</button>
		</h1>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				num:0,
				yanse:'red'
			}
		},
		//在directives属性下  可以定义私有自定义指令
		directives:{
			//此处的color就是自定义指令的名字
			color:{
				//当指令绑定到标签上时  会立即触发 bind事件
				bind(el,binding){
					el.style.color = binding.value
					console.log('触发了bind函数')
				},
				update(el,binding){
					el.style.color = binding.value
					console.log('触发了update函数')
				}
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	h1{
		background-color: blue;
		color: white;
	}
</style>
  1. 函数式自定义指令

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：

//全局指令中
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
//局部指令中
<script>
	export default{
		data(){
			return{
				num:0,
				yanse:'red'
			}
		},
		//在directives属性下  可以定义私有自定义指令
		directives:{
			//此处的color就是自定义指令的名字
			color(el,binding){
				el.style.color = binding.value
			},
		}
	}
</script>
此时我们的bind和update函数触发的行为是完全一样的 我们可以把指令对象简写成一个函数使用。

注意：

  • 指令的名字 如果是多个单词 推荐使用 ‘ - ’ 连接。
  • 指令中的内置函数中的this指向window对象。

3.4 全局自定义指令

注册一个全局自定义指令 Vue.directive(参数一，参数二)
参数一：指的是指令的名字
参数二：指的是指令的配置  可以是对象，也可以是函数
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

四、项目中axios的相关配置

**问题一：**在以后的vue-cli项目开发中我们很多时候都会发送大量的请求，按照以往的方式 我们会在每一个用到axios的vue文件中导入axios文件，这样比较麻烦 所以我们可以把axios挂载到vue 实例的原型对象上。

main.js文件：

//先在main.js文件中导入axios模块
import axios from 'axios'
//把axios模块挂载到vue的原型对象上，这样只要是vue的实例对象就都可以使用这个axios模块了，调用的时候 直接使用
//this.$http.get()  此时的$http<====>axios
Vue.prototype.$http = axios

问题二： 重复的导入axios是一个问题，其次每一次发送请求时 都要填写完整的路径也是一个问题，不利于后期的维护，所以我们可以在挂载axios之前 先对axios进行全局的路径配置：

//1.先在main.js文件中导入axios模块
import axios from 'axios'

//2.挂载之前先配置axios的BaseUrl路径
axios.defaults.baseURL = 'http://127.0.0.1:8080/'（请求的根路径）

//3.把axios模块挂载到vue的原型对象上，这样只要是vue的实例对象就都可以使用这个axios模块了，调用的时候 直接使用
//this.$http.get()  此时的$http<====>axios
Vue.prototype.$http = axios

五、总结与作业

  • 移动端页面头部组件的封装：

s挂载到vue 实例的原型对象上。

main.js文件：

//先在main.js文件中导入axios模块
import axios from 'axios'
//把axios模块挂载到vue的原型对象上，这样只要是vue的实例对象就都可以使用这个axios模块了，调用的时候 直接使用
//this.$http.get()  此时的$http<====>axios
Vue.prototype.$http = axios

问题二： 重复的导入axios是一个问题，其次每一次发送请求时 都要填写完整的路径也是一个问题，不利于后期的维护，所以我们可以在挂载axios之前 先对axios进行全局的路径配置：

//1.先在main.js文件中导入axios模块
import axios from 'axios'

//2.挂载之前先配置axios的BaseUrl路径
axios.defaults.baseURL = 'http://127.0.0.1:8080/'（请求的根路径）

//3.把axios模块挂载到vue的原型对象上，这样只要是vue的实例对象就都可以使用这个axios模块了，调用的时候 直接使用
//this.$http.get()  此时的$http<====>axios
Vue.prototype.$http = axios

五、总结与作业

  • 移动端页面头部组件的封装：

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ULLtc3kJ-1655272887374)(assets/image-20220216150337599.png)]

teayear
关注
专栏目录
Vue动态组件用法及使用场景
全栈弄潮儿
10-26 2399
Vue允许你使用动态组件（Dynamic Components）来根据运行时的数据动态切换渲染不同的组件。这在构建可扩展和灵活的用户界面时非常有用。你可以使用元素来实现动态组件，结合:is属性来指定要渲染的组件。
深入探索 Vue：动态组件、插槽与自定义指令
最新发布
小刘哥的博客
08-11 58
color: {},data() {return {
插槽 自定义指令 组件进阶
longfan_的博客
05-22 185
插槽 自定义指令 组件进阶
VUE05 动态组件, 插槽, 具名插槽, 插槽案例
qq_38998319的博客
06-07 335
1.动态组件 <script> /* 动态组件: 加载哪个组件不一定 在父标签中: <component :is="模板名"></component> 模板名可以是变量,我们可以通过改变变量控制显示的内容 */ </script> ...
Vue3 之 动态组件和KeepAlive组件
weixin_45092437的博客
05-28 2142
动态组件允许在同一挂载节点动态切换多个组件，可以根据具体条件，动态决定显示的组件。动态组件默认只保持当前组件存活，其余被切换掉的组件会被卸载，但可以结合KeepAlive组件实现被切换掉的组件保持存活状态。将KeepAlive组件包裹在动态组件的外层，当动态组件发生切换时，默认会将所有被切走的非活跃组件进行缓存，而不是销毁，并且组件内部的状态也会被保留。
8、组件高级玩法：动态组件
学海无涯苦作舟
02-09 2665
正常在父组件中使用子组件的方法是如下： 父组件html模板代码中：<!--前面的内容--> ... <child-component></child-component><!--这里直接插入子组件标签，然后标签里面的内容都是固定的--> ... <!--后面的内容-->但是如果我们不想这样固定地插入子组件，而是想通过代码动态地创建该如何进行呢？下面就介绍用代码动态创建组件： 直接看代码： 首先
Day06_动态组件_插槽_自定义指令_tabbar案例(1).pdf
05-03
在Day06的学习中，我们将深入探讨动态组件、插槽以及自定义指令，并通过一个tabbar案例进行实战练习。 首先，让我们详细了解动态组件。动态组件是通过Vue内置的`<component>`组件和`:is`属性来实现的。`:is`属性...
【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
qq_48687155的博客
07-26 550
动态组件，插槽，自定义指令，tabbar案例
element ui 简单应用：table组件-自定义列插槽及作用域的使用
法外狂徒张三
08-04 1264
自定义列-插槽 在element中的表单组件中往往会在其中插入一些按钮或者文字而我们通常会使用 <template> //按钮/文字 </template> 自定义列-作用域插槽 当我们要在插槽中要拿到数据，就用到了作用于插槽 <template slot-scope="scope"> {{ transGender(scope.row.gender) }} </template> ...
vue2,vant2使用slot自定义组件sku规格sku-group
xxfdcgfhvgbjhnjmk的博客
09-22 1308
vue2,vant2使用slot自定义组件sku规格sku-group
微信小程序 slot踩坑的解决
01-03
今天在使用微信小程序 component 里的 slot 时发现，当只用一个 slot 并且将 slot 命名后，页面中调用这个 slot 并不会加载进来。 研究尝试后发现，如果想要使用命名的方式调用单个 slot ，也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能。下面看代码。 // component 哈哈哈哈哈哈哈哈 // index 页面 <!-- 这部分内容将被放置在
小程序UI组件库Vant的Tab标签页Tabs Slot的使用
weixin_50877746的博客
01-23 6381
引言 今天使用Vant组件库的时候希望在Tab标签栏的左边加一段文字，看了Vant的官方文档关于Tabs Slot的使用 发现没有详细的用法说明，看了一下tabs的源码才了解怎么使用。 源码 我们可以看到<slot name=“nav-left”/> , 这不就是Vue中的插槽语法吗？ 用法 我们只需要用加一个slot=“nav-left”就能把这部分内容插到Tabs标签栏的左边，右边也同理 <van-tabs type="card" color="green" id="tabs"
VueJS 之动态组件
两个月亮
02-03 5293
在组件的动态切换过程中，存在组件的生成与销毁过程。在切换组件后，原组件将被销毁。再次切换为原组件时，由于组件经历了再生成的过程，组件中的数据都将处于初始状态。在实现组件的动态切换功能时，你可能会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。我们可以使用 keep-alive 元素达成该目的。
vant calendar 组件 bottom-info slot 用法
liubangbo的专栏
12-14 2341
从文档上看，bottom-info插槽有参数，所以是作用域插槽，我们看下此插槽用法。我们给bottom-info 加了节日，节气，农历，并给所有节气下面增加了一个*。
vue项目实录：下拉刷新组件的开发及slot的使用
flying meng的菜鸟居
10-24 7947
“下拉刷新”和“上滑加载更多”功能在前端、尤其是移动端项目中非常重要，这里笔者由曾经做过的vue项目中的“blink”功能和各位探讨下【下拉刷新】组件的开发： 正式开篇 在前端项目的 components 文件夹下新建 pullRefreshView 文件夹，在其中新建组件 index.vue：（它代表“整个屏幕”，通过slot插入页面其他内容而不是传统的设置遮罩层触发下拉刷新） 首先需要编写下拉刷新组件的 template，这里用到 <slot>，代码如下： <template>
Css实现页面元素置顶时悬浮
夏已微凉、
10-24 2146
一、描述二、思路三、解决四、代码 一、描述 当页面的标题不在页面显示时，把标题固定在页面顶部。 二、思路 通过比较元素距离窗口顶部的距离，Y轴滚动条距离窗口顶部的距离，来设置标题的样式； 如果数据足够多，就不会有问题； 问题重现,【 浏览器：火狐浏览器，分辨率：500 * 500】。如下图，你会发现Y轴滚不到最下面。 三、解决 不用Js计算距离，直接通过Css样式设置。 请打开以下代码<style>标签里的内容，注释titleTop()方法。 四、代码 <html> .
vue 动态表单添加，让你的网站更具交互性
热门推荐
Shids_的博客
03-25 1万+
vue 动态表单添加，让你的网站更具交互性
js 插槽的使用
敲代码无敌小奶龙的博客
02-02 578
js 插槽的使用
vant 日历插件slots_vue的vant组件库中的slot如何按需使用呢
weixin_39723920的博客
12-20 1548
问题描述以sku组件为例，有留言部分是项目不需要的。需要去除，官方定义了这部分的slot的name值为sku-messages。如何优雅的隐藏这部分呢，我想只在父元素的这个标签上修改，不去组件内部改源码可以做到吗？以下是标签。相关代码v-model="showStepper":sku="skuData.sku":goods="skuData.goods_info":goods-id="skuDat...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

teayear

读后有收获可以获取更多资源

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值