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>