关于javascript:Vue组件3-父访问子

作者：

在

父子拜访 children $refs

父组件拜访子组件：应用$children或$refs reference（援用）

<body>
  <div id="app">
      <cpn></cpn>
      <cpn></cpn>
      <cpn ref="aaa"></cpn>
      <button @click="btnClick">按钮</button>
  </div>
<template id="cpn">
  <div>
      我是子组件
  </div>
</template>
<script>
  var app = new Vue({
      el: '#app',
      methods: {
          btnClick() {
              console.log(this.$children)
              this.$children[0].showMessage() //拿到子组件，调用子组件办法
              console.log(this.$refs.aaa.name)//对象类型，默认是一个空的对象，须要在组件加上 ref=""
          }
      },
      components: {
          cpn: {
              template: '#cpn',
              data() {
                  return {
                      name: '我是子组件的name'
                  }
              },
              methods: {
                  showMessage() {
                      console.log('showMessage')
                  }
              }
          }
      }
  })
</script>

评论

发表回复取消回复

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章