vue $ref $parent $children

vue进阶实战课目录

ref的操作必须在mounted 不然拿不到dom

<template>
	<div style="width: 100px;margin: auto;">

		<!-- 获取普通元素 -->
		<input type="text" class="form-control" ref="input"/>
		<!-- 获取列表 -->
		<!-- <ul class="list-group">
			<li class="list-group-item" v-for="(item,index) in list" :key="index"
			ref="list">
				{{item}}
			</li>
		</ul> -->


		<!-- 获取组件 -->
		<!-- <demo-item ref="demoitem"></demo-item> -->

		<!-- $children -->
	<!-- 	<h1>11</h1>
		<demo-item></demo-item>
		<demo-item></demo-item>
		<demo-item></demo-item> -->

		<!-- $parent -->
		<!-- <h1 class="text-center">{{header}}</h1>
		<demo-item></demo-item> -->

	</div>
</template>

<script>
import demoItem from '@/components/demo-item.vue';
	export default {

    components: {
      demoItem
    },
		data() {
			return {
				header:"我是父组件",
				list: [1,2,3,4,5,6,7,8,9,10]
			}
		},
		// 页面渲染完成
		mounted() {
			// 获取input
			console.log(this.$refs.input)

			// 修改样式
			// this.$refs.input.style.borderColor = 'red'

			// 获取焦点
			// this.$refs.input.focus()


			// 获取列表
			// console.log(this.$refs.list);

			// 加随机颜色
			// this.$refs.list.forEach((v)=>{
			// 	v.style.backgroundColor ='#'+Math.floor(Math.random()*1000000)
			// })

			// 获取$refs子组件
			// console.log(this.$refs)

			// 操作子组件方法
			// console.log('父组件操作子组件')
			// this.$refs.demoitem.focus()
				// 操作子组件方法修改子组件数据
			// this.$refs.demoitem.renameHeader('父组件修改子组件')
			// 直接操作子组件数据
			//this.$refs.demoitem.val = '父组件修改子组件'

					//$ref  **$children的的区别。ref返回带有ref=“xx”的节点  ref方法如果只有一个ref，返回对象，有多个就返回数组。children方法不管你有没有ref命名 只要是本组件的子组件都获取，返回的是数组**
			//console.log(this.$children)
			// this.$children[0].renameHeader('修改第一个')

		},
		methods: {
			parentRename(data) {
				this.header = data
			}
		},
	}
</script>

<style>
</style>

子组件 demo

<template>
	<div style="width: 100px;margin: auto;">

		<!-- 获取普通元素 -->
		<!-- <input type="text" class="form-control" ref="input"/> -->
		<!-- 获取列表 -->
		<!-- <ul class="list-group">
			<li class="list-group-item" v-for="(item,index) in list" :key="index"
			ref="list">
				{{item}}
			</li>
		</ul> -->

   <!-- <ul>
      <li ref="list" class="list-group-item" v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul> -->


		<!-- 获取组件 -->
		<demo-item ref="demoitem"></demo-item>

		<!-- $children -->
		<!-- <h1>11</h1> -->
		<!-- <demo-item></demo-item> -->
		<!-- <demo-item></demo-item> -->
		<!-- <demo-item></demo-item> -->

		<!-- $parent -->
		<!-- <h1 class="text-center">{{header}}</h1>
		<demo-item></demo-item> -->

	</div>
</template>

<script>
import demoItem from './demo-item.vue';
	export default {

    components: {
      demoItem
    },
		data() {
			return {
				header:"我是父组件",
				list: [1,2,3,4,5,6,7,8,9,10]
			}
		},
		// 页面渲染完成
		mounted() {
			// 获取input
			// console.log(this.$refs.input)

			// 修改样式
			// this.$refs.input.style.borderColor = 'red'

			// 获取焦点
			// this.$refs.input.focus()


			// 获取列表
			// console.log(this.$refs.list);


			// 加随机颜色
			// this.$refs.list.forEach( v =>{
   //      v.style.backgroundColor = '#'+Math.floor(Math.random()*1000000)
   //    })

			// 获取子组件
			console.log(this.$refs)

			// 操作子组件方法
			// console.log('父组件操作子组件')
			this.$refs.demoitem.focus()

			// this.$refs.demoitem.renameHeader('父组件修改子组件')

			//this.$refs.demoitem.val = '父组件修改子组件'


			//console.log(this.$children)
			// this.$children[0].renameHeader('修改第一个')

		},
		methods: {
			parentRename(data) {
				this.header = data
			}
		},
	}
</script>

<style>
</style>

子组件 demo-item

<template>
	<div>

		<h2>{{header}}</h2>

		<input type="text" class="form-control" v-model="val"
		ref="input" @input="changeInput"/>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				header:"标题",
				val: '输入框'
			}
		},
		methods: {
			focus() {
				this.$refs.input.focus()
			},
			renameHeader(data){
				this.header = data
			},
			changeInput(e){
				this.$parent.header = e.target.value
				this.$parent.parentRename(e.target.value)
			}
		},
	}
</script>

<style>
</style>

git代码 方便大家复习