Vue 父子组件访问

1.父组件访问子组件 $children(开发一般不用) 这个拿所有的

<div id="app">
    <cpn></cpn>  
    <cpn></cpn>  
    <cpn></cpn>  
    <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
    <div>
       <h2>子组件本人</h2>
    </div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
       },
       methods:{
         btnClick(){
         //2.通过this.$children拿到这个组件下的子组件
            for(item  of this.$children){
               item.showMessage() 
               console.log(item.name)
            }
         }
       }
       components:{
           cpn:{
              template:'#cpn',
              methods:{
                 //1.给子组件定义个方法或者 属性值
                 showMessage(){
                    console.log("访问到了子组件中的方法")
                 }
              },
              data(){
                 return {
                    name:'子组件name'
                 }
              }
           }
       }
   })

</script>

2.父组件访问子组件 $refs 一般用这个 这个拿特定的（这个用的比较多）

<div id="app">
    <cpn></cpn>  
    <cpn></cpn>  
    //必须命名  不然this.$refs为空
    <cpn ref="aaa"></cpn>  
    <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
    <div>
       <h2>子组件本人</h2>
    </div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
       },
       methods:{
         btnClick(){
            console.log(this.$refs.aaa)
         }
       }
       components:{
           cpn:{
              template:'#cpn',
              methods:{
                 //1.给子组件定义个方法或者 属性值
                 showMessage(){
                    console.log("访问到了子组件中的方法")
                 }
              },
              data(){
                 return {
                    name:'子组件name'
                 }
              }
           }
       }
   })

</script>

3.子组件访问父组件 $parent

<div id="app">
    <cpn></cpn>  
</div>

<template id="cpn">
    <div>
       <h2>子组件本人</h2>
       <button @click="btnClick">按钮</button>
    </div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
       },
       components:{
           cpn:{
              template:'#cpn',
              methods:{
                btnClick(){
                    console.log(this.$parent)
                }
              }
           }
       }
   })

</script>

4.子组件访问父组件 $parent

<div id="app">
    <cpn></cpn>  
</div>

<template id="cpn">
    <div>
       <h2>子组件本人</h2>
       <button @click="btnClick">按钮</button>
    </div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
       },
       components:{
           cpn:{
              template:'#cpn',
              methods:{
                btnClick(){
                     console.log(this.$parent)
                }
              }
           }
       }
   })

</script>

4.访问根组件 $root

<div id="app">
    <cpn></cpn>  
</div>

<template id="cpn">
    <div>
       <h2>子组件本人</h2>
       <button @click="btnClick">按钮</button>
    </div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
   const app = new Vue({
       el:'#app',
       data:{
           messgae:'你好呀',
       },
       components:{
           cpn:{
              template:'#cpn',
              methods:{
                btnClick(){
                    console.log(this.$root)
                    //打印出的是Vue实例
                }
              }
           }
       }
   })

</script>