$refs、$parent、$children解析学习笔记

3 $refs、$parent、$children实战解析

1、新建文件

创建目录：ref-parent-children->创建文件：demo.vue 在App.vue引入demo组件

<template> 
    <div id="app" class="container p-5"> 
        <demo-ref></demo-ref> 
    </div> 
</template> 
<script> 
    import demoRef from '@/components/ref-parent-children/demo.vue'; 
    export default { 
        name: 'App', 
        components: 
        { 
            demoRef 
        } 
    } 
</script>

2、获取普通元素

<!-- 获取普通元素 --> 
<input ref="input" type="text" class="form-control">

3、获取列表

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

data() { 
    return { 
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
    } 
}, 
// 页面渲染完成 
mounted() { 
    // 获取列表 
    // console.log(this.$refs.list); 
    // 加随机颜色 
    this.$refs.list.forEach((v) => { 
        v.style.backgroundColor = '#' + Math.floor(Math.random() * 1000000) 
    }) 
}

4、获取组件

在components->ref-parent-children->新建demo-item.vue
<template> 
    <div> 
        <h2>{{val}}</h2> 
        <input v-model="val" type="text" class="form-control"> 
    </div> 
</template> 
<script> 
    export default { 
        data() { 
            return { 
                val: '输入框' 
            } 
        }, 
    } 
</script>

在components->ref-parent-children->dome.vue中

<!-- 获取组件 --> 
<demo-item></demo-item>

import demoItem from './demo-item.vue'; 
export default { 
    components: { 
        demoItem 
    }, 
}

5、父组件调用子组件属性和方法

1. $ref

子组件： 在components->ref-parent-children->demo-item.vue

<h2>{{header}}</h2> 
<input ref="input" v-model="val" type="text" class="form-control">

data() { 
    return { 
        header: "我是子组件", 
        val: '输入框' 
    } 
}, 
methods: { 
    focus() { 
        this.$refs.input.focus() 
    }, 
    renameHeader(data) { 
        this.header = data 
    } 
},

父组件： 在components->ref-parent-children->dome.vue中

<demo-item ref="demoitem"></demo-item>

// 父组件调用子组件属性和方法 
// console.log(this.$refs.demoitem); 
// 操作子组件方法 // console.log(父组件操作子组件); 
// this.$refs.demoitem.focus() 
// this.$refs.demoitem.renameHeader('父组件修改子组件') 
this.$refs.demoitem.val = '父组件修改子组件'

2. $children

父组件： 在components->ref-parent-children->dome.vue中

<!-- $children（只拿到子组件，不能拿到与子组件同级的节点） --> 
<h1>11</h1> 
<demo-item></demo-item> 
<demo-item></demo-item> 
<demo-item></demo-item>

// $children：当子组件比较少的情况下可以直接使用，不必使用ref 
// console.log(this.$children);
this.$children[0].renameHeader('修改第一个')

6、子组件调用父组件属性和方法

1. $parent

父组件： 在components->ref-parent-children->dome.vue中

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

data() { 
    return { 
        header: "我是父组件", 
    } 
}, 
methods: { 
    // $parent 
    parentRename(data) { 
        this.header = data 
    } 
},

子组件： 在components->ref-parent-children->demo-item.vue

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

// $parent 
changeInput(e) { 
    // console.log(e.target.value); 
    // this.$parent.header = e.target.value 
    this.$parent.parentRename(e.target.value) 
}

本文为网易云课堂Vue.js进阶技巧实战开发 第三课时《$refs、$parent、$children实战》学习笔记