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

阳光穿透心脏的1/2处 2021-07-24 16:30 761阅读 0赞

实例变量/方法
    	$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。
    	 
    	$ref
    		一个对象,持有注册过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调用