组件访问

父组件访问子组件使用$chrean或者$refs

<div id="app">
<nv></nv>
<nv></nv>
<nv></nv>
<nv ref="a"></nv>
<button type="button" @click="dianji">点击</button>
</div>
<template id="nv">
<div class="ha">
    <h1>我是组件</h1>
</div>
</template>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
    el:"#app",
    methods:{
        dianji(){
            console.log(this.$children);
            console.log(this.$children[0].showk())
            console.log(this.$refs)
            console.log(this.$refs.a)
            console.log(this.$refs.a.showk())
        }
    },
    data:{
        
    },
    components:{
        nv:{
            template:"#nv",
            methods:{
                showk(){
                    console.log(21)
                }
            }
        }
    },
    
})
</script>

在这个例子中,$chiren访问的是一组,如果要访问单独的某一个就要加上下标值,然后$refs访问的是一个对象,给组件加一个ref属性,取名为a那么a就是这个对象的一个key值,而组件就是这个key的vaul值

posted @ 2020-08-14 19:22  颿華正茂  阅读(164)  评论(0)    收藏  举报