9.vue实例信息、属性继承、自定义以及内部事件

最新推荐文章于 2023-02-19 20:20:06 发布

「已注销」

最新推荐文章于 2023-02-19 20:20:06 发布

阅读量370

点赞数

分类专栏： vue简介文章标签： vue

本文链接：https://blog.csdn.net/weixin_47870554/article/details/107271818

版权

实例信息

$data：对实例地data对象属性地访问；
$props：对组件实例地props对象属性地访问；
$el：访问实例使用的根 DOM 元素；
$options：访问实例所有属性；
$isServer：当前 Vue 实例是否运行于服务器。；
$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。；
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vueTest</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	</div>
	<script type="text/javascript">		
		Vue.config.productionTip = false;
		var
			demo = {
				props: ['props'],
				methods: {
					getProps(){
						console.log('getProps');
						console.log(this.$props);
					},
					getAttrs(){
						console.log('getAttrs');
						console.log(this.$attrs);
					},
					listeners(){
						console.log('listeners');
						console.log(this.$listeners);
					}
				},
				template: `	<div>
								<button v-on:click='getProps'>$props</button>
								<button v-on:click='getAttrs'>$attrs</button>
								<button v-on:click='listeners'>$listeners</button>
							</div>
							`,
			},
			app = new Vue({
				el: '#app',
					data(){
						return {
							name: '实例信息 property'
						}
					},
					methods: {
						getData(){
							console.log('getData');
							console.log(this.$data);
						},
						getEl(){
							console.log('getEl');
							console.log(this.$el);
						},
						getOptions(){
							console.log('getOptions');
							console.log(this.$options);
						},
						isServer(){
							console.log('isServer');
							console.log(this.$isServer);
						},

					},
					components: {
						'component-demo': demo,
					},
					template:
					 `<div>
						<button v-on:click='getData'>$data</button>
						<button v-on:click='getEl'>$el</button>
						<button v-on:click='getOptions'>$options</button>
						<button v-on:click='isServer'>$isServer</button>
	
						<component-demo
							v-on:listeners='isServer'
							v-on:test='isServer'
							props = 'props'
							attrs = 'attrs'
						></component-demo>
					</div>`
			})
	</script>
</body>
</html>

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9.vue实例信息、属性继承、自定义以及内部事件

实例信息$data：对实例地data对象属性地访问； $props：对组件实例地props对象属性地访问； $el：访问实例使用的根 DOM 元素； $options：访问实例所有属性； $isServer：当前 Vue 实例是否运行于服务器。； $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以...
复制链接

扫一扫