父组件:

<template>
  <div>
    <h2>我是父组件:</h2>
    <div>
      <input v-model="parementMsg">
    </div>
    <div>
      <!-- 3.向子组件 传参 -->
      <Child2 :fromParentMsg="parementMsg"></Child2>
      <button @click="parent_child_fun">调用子组件的方法</button>
    </div>
  </div>
</template>
<script>
// 1.引入子组件
import Child2 from "@/components/Child2"
export default {
  data() {
    return {
      parementMsg: ''
    }
  },
  mounted() {
    // $children 是一个数组 获取子组件的属性
    console.log(this.$children[0].child_msg)
    // 获取子组件的方法
    console.log(this.$children[0].child_fun())
  },
  methods: {
    parent_child_fun() {
      this.$children[0].child_fun()
    }
  },
  // 2.在父组件中注册
  components: {
    Child2
  }
}
</script>

子组件:

<template>
    <div>
        这是子组件的内容-来自父组件:{{fromParentMsg}}
    </div>
</template>
<script>
export default {
    // props 接受父组件传递的值
    props:['fromParentMsg'],
   data() {
      return {
          child_msg:"这是child的msg"
      }
   },
   methods:{
       child_fun(){
           alert('23452344')
       }
   }
}
</script>
<style scoped>
</style>

在这里插入图片描述

$children 他返回的是一个组件集合,如果你能清楚的知道子组件的顺序,你也可以使用下标来操作;

父组件通过$children获取子组件的方法 如下图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐