Class2 ref/parent/children的使用

ref

ref被用来给元素或子组建注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。

this.refs

获取当前组件被ref注册引用的所有组件，返回一个元素数组。
在当前组建，可以通过this.$refs.name获取当前name元素（name元素被ref标记）

this.parent

获取当前组件的父类实例，返回一个元素。
在子组件，可以通过this.$parent.pro和this.$parent.method调用父组件的属性和方法

this.children

获取当前组件子类实例，返回的一个元素数组。
在父组件，可以通过this.$children[0].pro和this.$children[0].method调用父组件的属性和方法

Vue2 案列

demo.vue

<template>
    <div>
        <h2>$ref</h2>
        <h4 class="mt-5">输入框</h4>
        <div>
            <input type="text" class="form-control" ref="input">
            <button class="btn btn-primary mt-2" @click="changeBtnColor">修改颜色</button>
        </div>
        
        <h4 class="mt-5">列表</h4>
        <div>
            <ul class="list-group">
                <li class="list-group-item" ref="list"
                v-for="(item, index) in list" :key="index">
                    {{item}}
                </li>
            </ul>
            <button class="btn btn-primary mt-2" @click="changeListColor">修改列表颜色</button>
        </div>
        
        <h2 class="mt-5">$parent/children</h2>
        <div class="border border-success" style="height: 300px;">
            <div>
                <label for="" >父组建:{{header}}</label>
            </div>
            <button class="btn btn-primary" @click="onChangeChildreTitle">父改子标题</button>
            <demo-item></demo-item>
        </div>
        
    </div>
</template>

<script>
    import demoItem from "./demo-item.vue"
    export default {
        data() {
            return {
                list:[1,2,3,4,5],
                header:'父标题'
            }
        },
        components:{
            demoItem,
        },
        mounted() {
        },
        methods:{
            changeBtnColor(){
                this.$refs.input.style.backgroundColor = '#' + Math.floor(Math.random() * 1000000)
            },
            changeListColor(){
                this.$refs.list.forEach(item=>{
                    item.style.backgroundColor = '#' + Math.floor(Math.random() * 1000000)
                })
            },
            onChangeChildreTitle(){
                this.$children[0].rename('父修改子标题')
            },
            onChangeTitle(){
                this.header = '子修改父标题'
            }
        }
    }
</script>

<style>
</style>

demo-item.vue

<template>
    <div class="border border-danger d-flex mt-4 flex-column">
        <div class=" mt-4">子组建:{{subTitle}}</div>
        <button class="btn btn-primary" @click="onChange">子改父标题</button>
        <input type="text" class="form-control  mt-4" ref='subInput' style="width: 100%;height: 100px;"  v-model="val" @input="onChange">
    </div>
</template>

<script>
    export default {
        data() {
            return {
                header:'默认标题',
                val:'',
                subTitle:'子标题'
            }
        },
        mounted() {
            console.log('子组建的input元素');
            console.log(this.$refs.subInput);
        },
        methods:{
            onChange(){
                this.$parent.header = '子修改父标题'
                // console.log(this.$parent);
            },
            rename(data){
                console.log(data);
                this.subTitle = data
            }
        }
    }
</script>

<style>
</style>