VueJS（八）

最新推荐文章于 2022-04-11 11:18:56 发布

mwwb

最新推荐文章于 2022-04-11 11:18:56 发布

阅读量123

点赞数

分类专栏： VueJS 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43278421/article/details/107119262

版权

VueJS 专栏收录该内容

14 篇文章

订阅专栏

上次学到作用域

首先需要明确slot分发的内容是在父组件上的
所谓内容在父组件和子组件的内容之分，就是看在哪里编译
在子组件上绑定的话写在组件注册内容内部，父组件绑定是写在注册vue实例内容中

slot的用法
slot的意思是插槽，用于内容分发，就是混合父组件的内容和子组件的模板

单个slot
在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）
在父组件模板里面插入在子组件标签内的所有内容将代替子组件的<slot>标签及它的内容

	<body>
		<div id="app">
			<child-component>
				<p>分发的内容</p>
				<p>更多</p>
			</child-component>
		</div>
		<script>
			Vue.component('child-component',{
				template:'\
				<div>\
				   <slot>\
				       <p>如果没有内容，这句话将默认出现</p>\
				   </slot>\
				</div>'
			});
			
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

来看看一个案例，就是一个普通的注册组件，然后使用的过程，之前一般的组件注册内容，在写了template属性后，里面的内容会完全替代使用组件标签时里面的内容，但是这里的template内容添加了slot的属性后，就变得不一样了，他不会直接完全替代原本组件标签中的内容，只会在组件标签原本无内容时替换
子组件child-component的模板内定义了一个slot元素，并且使用一个p作为默认内容，在父组件没有使用slot的

具名slot
给slot元素指定一个name后可以分发多个内容，具名slot可以与单个slotslot共存
额，我理解错了，slot的作用不是为了禁止template里面的内容代替组件标签内容，而是slot相当于一个槽孔，插槽，让组件标签内的内容加入到slot里面，然后再把template的内容替换组件标签内容，而槽孔原来的内容会被替代，除非组件标签原来没内容，芜湖！！！

	<body>
		<div id="app">
			<child-component>
				<h2 slot="header">标题</h2>
				<p>正文内容</p>
				<p>更多正文内容</p>
				<div slot="footer">底部消息</div>
			</child-component>
		</div>
		<script>
			Vue.component('child-component',{
				template:'\
				<div class="xx">\
				   <div class="x">\
				       <slot name="footer"></slot>\
				   </div>\
				   <div>\
				       <slot></slot>\
				   </div>\
				   <div>\
				      <slot name="header"></slot>\
				   </div>\
				</div>'
				
			});                  //main那个是默认slot
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

这里经过渲染后的结果就是：

<div class="xx">
   <div class="x">
		<div>底部消息</div>
  </div>
  <div>
     <p>正文内容</p>
	 <p>更多正文内容</p>
  </div>
  <div>
	 <h2>标题</h2>
  </div>
</div>

作用域插槽
作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素

	<body>
		<div id="app">
			<child-component>
				<template scope="props">
					<p>来自父组件的内容</p>
					<p>{{props.msg}}</p>
				</template>
			</child-component>
		</div>
		<script>
			Vue.component('child-component',{
				template:'\
				<div class="container">\
				   <slot msg="来自子组件的内容"></slot>\
				</div>'
			
				
			});
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

分析：
渲染后的结果是：

<div id="app">
    <div class="container">
        <p>来自父组件的内容</p>
        <p>来自子组件的内容</p>
    </div>
</div>

在slot元素上有一个类似props传递数据给组件的写法msg=“xxx”，将数据传到了插槽中。父组件使用了template元素，而且拥有一个scope=“props”的特性，这里的props可以是任意变量，并不代表什么绑定。template内通过变量props访问来自子组件插槽的数据msg

作用域插槽更具有代表性的用例是列表组件，允许组件自定义应该如何渲染列表的每一项

<body>
		<div id="app">
			<my-qian :books="books">
				<template slot="book" scope="props">
					<li> {{props.bookName}} </li>
				</template>
			</my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				props:{
					books:{
						type:Array,
						default:function(){
							return [];
						}
					}
				},
				template:'\
				<ul>\
				    <slot name="book" v-for="book in books" :book-name="book.name">\
					</slot>\
				</ul>'
			});
			var app = new Vue({
				el:'#app',
				data:{
					books:[
						{ name: 'xxxxx'},
						{ name: 'yyyyy'},
						{ name: 'zzzzz'}
					]
				}
			})
		</script>
	</body>

子组件my-qian接受一个来自父级的prop数组books，并且将它在叫做book的插槽中使用v-for循环，并使用点出bookName的值3次，这个for循环是子组件的插槽中进行的

访问slot
未来就是现在！

使用$slot可以访问被slot分发的内容

<body>
		<div id="app">
			<my-qian>
				<h2 slot="header">标题</h2>
				<p>正文</p>
				<p>more</p>
				<div slot="footer">底部信息</div>
			</my-qian>
		</div>
		<script>
			Vue.component('my-qian',{
				template:'\
				<div class="container">\
				   <div class="header"></slot>\
				        <slot name="header"></slot>\
				   </div>\
				   <div class="main">\
				        <slot></slot>\
				   </div>\
				   <div class="footer">\
				         <slot name="footer"></slot>\
				   </div>\
				</div>',
				mounted:function(){
					var header = this.$slots.header;
					var main = this.$slots.default;
					var footer = this.$slots.footer;
				//	console.log(footer);
					console.log(footer[0].elm.innerHTML);
				}
				   
			});
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>

这里面通过mounted里面的内容访问了几个具名slot还有匿名，匿名的通过this.$slots.defaut来访问，其他的都是this.$slot.+名字来访问，然后如果是具体的名字，需要语句console.log(footer[0].elm.innerHTML);
如果是获取所有信息在控制板上，就是通过console.log(footer);

$nextTick
一个div，默认用v-if隐藏之，点击按钮，改变v-if值使之显现，同时也就获取到了这个div的内容，但是如果值为负的时候，是无法获取的，之前说和v-show的区别的时候也讲过了，这个是不曾渲染的在为假时

<body>
		<div id="app">
			<div id="div" v-if="showDiv">这是一段问了</div>
			<button @click="getText">获取内容</button>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					showDiv:false
				},
				methods:{
					getText:function(){
						this.showDiv = true;
						var text = document.getElementById('div').innerHTML;
						console.log(text);
					}
				}
			})
		</script>
	</body>

像上面这样直接获取div的内容的话，是会报错的，因为根本没有渲染

vue在观察到数据变化的时候并不是直接更新DOM，而是开启一个队列，并缓冲在同一时间循环中发生的所有数据改变。在缓冲的时候会去除重复数据，从而避免不需要的计算和DOM操作。然后在下一个事件循环tick中，vue刷新队列并执行工作
所以如果是一个for循环来动态改变数据100次，他只会应用最后一次改变
$nextTick可以用来知道DOM是什么时候更新完成的

	<body>
		<div id="app">
			<div id="div" v-if="showDiv">这是一段文本</div>
			<button @click="getText">获取内容</button>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					showDiv:false
				},
				methods:{
					getText:function(){
						this.showDiv = true;
						this.$nextTick(function(){
							var text = document.getElementById('div').innerHTML;
							console.log(text);
						});
					}
				}
			})
		</script>
	</body>

这样把获取div的语句放进$nextTick里面就可以了，不会继续报错

手动挂载实例
一般来说都是new Vue（）来创建实例。如果需要动态地创建一些Vue实例的话，就需要用到Vue.extend和$mount两个方法来手动挂载一个实例

Vue.extend是基础Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象。
如果Vue实例在实例化的时候没有收到el选项，他就处于一个未挂载的状态，没有关联的DOM元素。可以使用$mount（）手动地挂载一个未挂载的实例

	<body>
		<div id="mount-div">
			
		</div>
		<script>
			var MyComonent = Vue.extend({
				template:'<div>Hello:{{name}}</div',
				data:function(){
					return {
						name : 'Ak'
					}
				}
			});
			
			new MyComonent().$mount('#mount-div');
		</script>
	</body>

具体，明天再分析