父组件访问子组件的方式$refs

一、$refs的使用

$refs和ref是一起使用的，
通过ref给子组件绑定一个id，
使用this.$refs.id就能获取到特定的子组件

image.png

image.png

        <div id="app">
            <cpn></cpn>
        </div>
        <template id="cpn">
            <div>
                <cpn1></cpn1>
                <cpn2 ref="cpn2"></cpn2>
                <button @click="showChildCpn">显示所有子组件信息</button>
            </div>
        </template>
        <template id="cpn1">
            <div>
                <h2>子组件1</h2>
            </div>
        </template>
        <template id="cpn2">
            <div>
                <h2>子组件2</h2>
            </div>
        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            const cpn = Vue.extend({
                template: '#cpn',
                components: {
                    /*子组件1*/
                    cpn1:{
                        template: '#cpn1',
                        data() {
                            return{
                                name:'one'
                            }
                        }
                    },
                    /*子组件2*/
                    cpn2:{
                        template: '#cpn2',
                        data(){
                            return{
                                name:'two'
                            }
                        }
                    }
                },
                methods: {
                    /*打印子组件对象*/
                    showChildCpn() {
                        console.log(this.$refs.cpn2.name)
                    }
                }
                
            })
            
            const app = new Vue({
                el: '#app',
                /*注册父组件*/
                components: {
                    cpn: cpn
                }
            })
        </script>

获取cpn2子组件的name

image.png