9.关于ref的使用

1.在普通标签上可以使用ref来获取Dom

<div id="app">
			<p @click="handerClick" ref="pp" id="p">你好 web2208</p>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {

					}
				},
				methods: {
					handerClick() {
						 console.log(document.getElementById('p'))
                       /* console.log(document.getElementById('p').innerHTML); */
					   console.log(this.$refs.pp.innerHTML);
					}
				},
				computed: {

				}
			})

2.ref可以实现组件间的通讯

<div id="app">
			<counter ref="one" @change="handelClick"></counter>
			<counter ref="two" @change="handelClick"></counter>
			<h2>{{total}}</h2>
			<!-- <button type="button" @click="change">+</button> -->
		</div>
		<script src="vue.js"></script>
		<script>
			Vue.component('counter', {
						template: `<div @click="handelclick">{{number}}</div>`,
						data() {
							return {
								number: 0
							}
						},
						methods: {
							handelclick() {
								this.number++;
								this.$emit('change');
							}
							}
						}) 
						const app = new Vue({
						el: "#app",
						data() {
							return {
								total:0
							}
						},
						methods: {
							handelClick() {
							this.total = this.$refs.one.number + this.$refs.two.number 
							}
						},
						computed: {

						}
					})

3.ref可以调用组件中的方法

<div id="app">
              <helloworld ref="hello"></helloworld>
              <button @click="getHello">获取helloworld组件中的值</button>
		</div>
		<script src="vue.js"></script>
		<script>
			Vue.component('helloworld',{
				template:'<div></div>',
				data(){
					return {
						number:0
					}
				},
				methods:{
					handelclick(){
						console.log('被调用了');
					}
				}
			})
			const app = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
                  getHello(){
					   this.$refs.hello.handelclick();
			                   console.log(this.$refs.hello.number);
					   console.log(this.$refs.hello);
				  }
				},
				computed:{
					
				}
			})