vue 访问根示例、ref操作dom、限制组件暴露内容expose

1、访问根示例
	1、在main.js中,与components同级,添加data属性
		data:{键值对}

	2、则在App.vue中导入过的所有子组件都能访问
		一般在computed计算属性中
		computed:{
			函数中{
				this.$root.键名获取
			}
		}
		
2、ref:
	ref只会在组件渲染完成之后生效,并且它们不是响应式的.这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问$refs
	
	1、在元素标签上
		方式一:ref='xx'
		
		方式二:动态绑定时,可以将ref定义为回调函数
			<child-component :ref="(el) => child = el"></child-component>
		
	2、在函数中
		this.$refs.xx.js操作方式
			如:this.$refs.pp.innerHTML='我被修改了
			
	组件使用ref
		使用方式和标签一样,通过this.$ref.xx.$el获取到组件内部所有dom元素
		this.$ref.xx.属性/方法名,能访问到组件内部的属性和方法

3、expose
	通过 $refs、$parent 或 $root 访问到的公共实例与模板使用的组件内部实例是一样的
	expose选项将限制公共实例可以访问的property
	export default {
	  expose: ['increment'],
	  data() {
	    return {
	      count: 0	不能被访问
	    }
	  },
	  methods: {
	    increment() {
	      this.count++
	    }
	  }
	}

代码示例:
main.js:

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data:{foo:'hello foo'},
  components: { App },
  template: '<App/>'
})

子组件:

<template>
	<div>
		组件C
		<p ref='pp'>dom</p>
		{{get}}
	</div>

</template>

<script>
export default{
	name:'c',
	data()
	{
		return{

		}
	},
	//声明周期函数,相当于componentDidMount
	mounted()
	{
		this.$refs.pp.innerHTML='我被改了'
	},
	computed:{
		get()
		{
			return this.$root.foo;
		}
	}
}
</script>

<style lang='css'>
</style>