父子组件之间的访问

父访问子$children $refs

  • $children
cpn: {
          template: '#cpn',
          data(){
            return{
              name:'黄开然'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage')
            }
          }
        }
      }

如何在父组件中调用showMessage()?

<div id="app">
    <cpn></cpn>
    <button @click="btnClick">button</button>
</div>
  
var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        btnClick() {
          console.log(this.$children)
          for(let c of this.$children){
            console.log(c.name)
            c.showMessage()
          }
        }
      }
  • refs
默认是个空的对象

一个类似id的标识
使用:

<cpn ref="aaa"></cpn>
methods: {
        btnClick() {
          console.log(this.$refs.aaa.name)
        }
      },

子访问父 $parent $root

不常用

父子组件之间的访问父子组件之间的访问 kaba啊 发布了6 篇原创文章 · 获赞 2 · 访问量 1478 私信 关注
上一篇:vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法


下一篇:Delphi Variant 通用类型[4] 通用数组的通用(变体)数组