vue $实例变量/方法、Vue.全局属性/方法、原型prototype来组件之间获取数据

实例变量/方法
	$data
		组件实例正在侦听的数据对象。组件实例代理了对其data对象property的访问。
		以_或$开头的property不会被Vue实例代理,因为它们可能和Vue内置的property、API方法冲突
		
	$props
		当前组件接收到的 props 对象。组件实例代理了对其props对象property的访问。
		只读代理
	
	$options
		用于当前组件实例的配置选项,包括自定义的配置项也能访问
		const app = Vue.createApp({
		  customOption: 'foo',
		  created() {
		    console.log(this.$options.customOption) // => 'foo'
		  }
		})

		
	$parent
	  父组件实例,在子组件中修改会影响父组件
	  可以this.$parent.$parent链式调用取父组件之上的组件
	    
	    (1)获取父组件的方法/计算属性
	        this.$parent.方法名();  
	        this.$parent.计算属性; 计算属性只会执行一次
	         
	    (2)获取父组件data的属性
	        this.$parent.属性名;  
	
	$root
	    
	    获取最外层根组件(main.js内的组件),如果当前实例没有父实例,此实例将会是其自己。
	    用法和$parent一样
	    
	$el
		获取当前组件中的根元素dom(包括其子元素)
		
	$children
	    获取当前组件的子组件,子组件会被放进数组里
	    获取子组件的下标后,操作和$parent一样
	    并不保证子组件顺序,也不是响应式的
	
	$slots   
		获取插槽的内容,会是类似虚拟节点的结构
		    <组件>
		      <template v-slot:foo>
		      	具名内容
		      </template>
		      啊哈哈
		    </组件>
		具名插槽:this.$slots.foo()		v3版本
		默认插槽:this.$slots.default()
		
		渲染函数中应用,v2.5版本
		<blog-post>
		  <template v-slot:header>
		    <h1>About Me</h1>
		  </template>
		
		  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
		
		  <template v-slot:footer>
		    <p>Copyright 2016 Evan You</p>
		  </template>
		
		  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
		</blog-post>
		
		Vue.component('blog-post', {
		  render: function (createElement) {
		    var header = this.$slots.header
		    var body   = this.$slots.default
		    var footer = this.$slots.footer
		    return createElement('div', [
		      createElement('header', header),
		      createElement('main', body),
		      createElement('footer', footer)
		    ])
		  }
		})
    
    $scopedSlots
    	作用域插槽,包括默认slot在内的每一个插槽,该对象都包含一个返回相应VNode的函数。
    	所有的$slots现在都会作为函数暴露在$scopedSlots中,如果你在使用渲染函数,不论当前插槽是否带有作用域,我们都推荐始终通过$scopedSlots访问它们,这不仅仅使得在未来添加作用域变得简单,也可以让你最终轻松迁移到所有插槽都是函数的Vue 3。
	 
	$refs
		一个对象,持有注册过ref的所有DOM元素和组件实例。    
		
	$attrs 
		获取传递给组件的未在props中注册的属性和未在emits中注册的函数
			2.5不包括style和class
			3.0包括style和class
			注册:
			export default {
				props:[...],
				emits:[...]
			}
	
	$forceUpdate
		this.$forceUpdate()
		迫使组件实例重新渲染,注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件
	
		
	$listeners
		是一个对象,里面包含了作用在这个组件上的(不含.native修饰器的)所有监听器。例如:
		{
		  focus: function (event) { /* ... */ }
		  input: function (value) { /* ... */ },
		}
		它可以通过v-on="$listeners"传入内部组件
  
	$isServer
		当前Vue实例是否运行于服务器。
	
	$emit('test','hi')
	$on('test',fn)
	$once('test',fn)	只监听一次,监听器就会被移除
	$off(['test',fn])	移除自定义事件监听器
		 如果没有提供参数,则移除所有的事件监听器;
		 如果只提供了事件,则移除该事件所有的监听器;
		 如果同时提供了事件与回调,则只移除这个回调的监听器。
	
	$destroy()
		完全销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器。
		触发beforeDestroy和destroyed的钩子。
		
Vue.全局属性/方法:
	
	取消所有的日志与警告。
		Vue.config.silent = true
	
	忽略在Vue之外的自定义元素(使用了 Web Components APIs),否则会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于 Unknown custom element 的警告。
		Vue.config.ignoredElements = [
		  'my-custom-web-component',
		  'another-web-component',
		  /^ion-/	可以使用正则
		]
	
	自定义键盘码对应键盘名
		Vue.config.keyCodes = {
		  v: 86,
		  f1: 112,
		  "media-play-pause": 179,	只能用驼峰命名
		  up: [38, 87]
		}
		
		<input type="text" @keyup.media-play-pause="method">
  
  	在启动时生成生产提示。
		Vue.config.productionTip
	
	删除属性触发响应变化
		Vue.delete(target, propertyName/index)
		
	将一个模板字符串编译成render函数
		var res = Vue.compile('<div><span>{{ msg }}</span></div>')

		new Vue({
		  data: {
		    msg: 'hello'
		  },
		  render: res.render,
		  staticRenderFns: res.staticRenderFns
		})
	
	让一个对象可响应
		Vue.observable( object )
   
    返回Vue的版本号
    	Vue.version
		
prototype
	将属性/方法绑定到Vue原型上,
	每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。
	Vue.prototype.$xx=xxx来绑定,首字母$避免命名冲突
	组件上通过this获取到实例对象,this.$xx调用
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值