vue $ref $parent $children

心已赠人 2022-12-22 11:24 157阅读 0赞

### [vue进阶实战课目录][vue] ###

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

<template>
    	<div style="width: 100px;margin: auto;">
    
    		
    		<input type="text" class="form-control" ref="input"/>
    		
    		
    
    
    		
    		
    
    		
    	
    
    		
    		
    
    	</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;">
    
    		
    		
    		
    		
    
       
    
    
    		
    		<demo-item ref="demoitem"></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代码 方便大家复习][git_]

[vue]: https://blog.csdn.net/weixin_45345105/article/details/109844407
[git_]: https://github.com/zero19124/vue-advance-demo