vue 组件要记

最新推荐文章于 2025-09-10 19:52:29 发布

转载最新推荐文章于 2025-09-10 19:52:29 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2552286/blog/1831399

文章标签：

#python #javascript #ViewUI

本文介绍了Vue.js中组件的多种高级使用技巧，包括利用v-model实现双向绑定、使用ref属性访问子组件、递归组件的限制及使用、内联模板的注意事项、动态组件的应用、$nextTick确保DOM更新完成及手动挂载Vue实例的方法。

2019独角兽企业重金招聘Python工程师标准>>>

1. 使用组件时，使用【v-model】完成双向绑定

①组件中要定义一个【value】值，也就是 props中有定义一个【value】属性，即传值

②在有新的value 时触发 input 事件，即写值。

2.使用组件时，添加【ref 】属性，来指定一个索引名称

① 可以使用 this.$refs.索引名

②$refs 只在组件渲染完成后才填充，并且它是非响应式的，它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用$refs

3.递归组件

在组件定义的时候，设置【name】后，就可以在组件模板内使用了，不过需要注意的是，必须给一个条件来限制递归的数量，否则会抛出错误：max stack size exceeded.

4. 内联模板

使用组件时，给组件标签使用【 inline-template】特性，组件就会把它的内容当作模板，而不是把它当内容分发。如果不是非常特殊的场景，建设不要轻易使用

5.动态组件

vue.js 提供了一个特殊的元素<component> 用来动态地挂载不同的组件，使用is 特性一选择要挂载的组件

<div>
   <component :is="currentView"></component>
</div>
<script >
	new Vue({
		components:{
			comA:{  //组件1
				template:'<div>aaa</div>'
			},
			comB:{  //组件2
				template:'<div>bbb</div>'
			}
		}
		data:{
			currentView:'comA'  //选择了组件 comA
		}
	})
</script>

6. $nextTick

如果我们改变数据，致视图发生了变化。这个过程中Vue使用的是【异步更新队列】，即数据的修改，与视图的变化是异步的。Vue 在观察到数据变化时并不是直接更新DOM，而是开户一个队列，并缓冲在同一事件循环中发生所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。
$nextTick就是用来知道什么时候DOM更新完成的。如果我们使用popper.js 或 swiper 等可能要获取 DOM

<div>
   <div id="content" v-if="show"></div>
</div>
<script >
	new Vue({
		data:{
			show:false  
		},
		methods:{
			myEvent:function(){
				this.show = true;
				this.$nextTick(function(){
					document.getElementById('div');		//如果没有放在 $nextTick 那么是获取不到的
				});
			}
		}
	})
</script>

7. 手动挂载实例 Vue.extend 和 $mount

Vue 提供了Vue.extend 和 $mount 两个方法来手动挂载一个实例

<div id="app"></div>
<script >
	//例1：
	new Vue().$mount('app');

	//例2：
   let myExtend =  Vue.extend({
    	template:'...',
    	data:{}
    });

   new myExtend().$mount('app')

   //例3：
   let component =   new myExtend().$mount();
   document.getElementById("app").appendChild(component.$el);
</script>

转载于:https://my.oschina.net/u/2552286/blog/1831399