[Vue.js]Vue.jsでDOMやコンポーネントを操作するのに便利なref機能

<template>
  <div id="app">
    <div ref='reftest'>
		Refテストです。
    </div>
    <input type="button" @click="changeColor" value="色チェンジ">
  </div>
</template>

<script>

export default {
  name: 'App',
  methods:{
    changeColor(){
		   this.$refs.reftest.style.background = '#0FF'
       //this.$refs['reftest'].style.background = '#0FF'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
div{
	width:200px;
	height:20px;
	background:#0F0
}
</style>

<template>
	<div>
		{{viewMsg}}
	</div>
</template>

<script>
export default {
	name: 'Child',
	props: {
		msg: String
	},
	data(){
		return {
			viewMsg : ''
		}
	},
	mounted(){
		this.viewMsg = this.msg
	},
	methods:{
		setText:function( value ){
			this.viewMsg = value
		}
	}
}
</script>

<template>
	<div>
		<Child msg='コンポーネントテスト' ref="cmptest" />
		<br/>
		<input type="button" @click='clickCmp' value="コンポーネント"><br/>
	</div>
</template>

<script>
import Child from './Child.vue'

export default {
	name: 'Parent',
	components: {
		Child
	},
	methods:{
		clickCmp(){
			this.$refs.cmptest.setText("コンポーネントテスト click")
		}
	}
}
</script>

<template>
	<div>
		<center>
		<table>
			<tr v-for="(data) in list" :key="data">
				<td><Child :msg='data' ref='child'/></td>
			</tr>
		</table><br/>
		<input type="button" @click='click0' value="0">
		<input type="button" @click='click1' value="1">
		<input type="button" @click='click2' value="2"><br/>
		<input type="button" @click='clickAll' value="all">
		</center>
	</div>
</template>

<script>
import Child from './Child.vue'

export default {
	name: 'Parent',
	components: {
		Child
	},
	data(){
		return {
			list :[]
		}
	},
	created(){
		this.list =  ['0', '1', '2']
	},
	methods:{
		click0(){
			this.$refs.child[0].setText("0 click")
		},
		click1(){
			this.$refs.child[1].setText("1 click")
		},
		click2(){
			this.$refs.child[2].setText("2 click")
		},
		clickAll(){
			let i = 0
			this.$refs.child.forEach((value) => {
				value.setText(i + " click")
				i++
			})
		}
	}
}
</script>