需求:
在父组件的一个事件可以改变子组件中的 openData 的值变为 true。

废话不多说,直接上代码:

父级页面:


<template>
  <div>
    <div @click="changeChild">按钮改变子组件数据</div>
    <children ref="childrenDom"></children>
   </div>
</template>
 
<script>
import Childrens from ".../childrens"
export default {
components: {
    Childrens
  },
    methods: {
        changeChild() {
            this.$refs.childrenDom.openData = true
        }
    }
}
</script>

注: this.$refs.childrenDom就是指的childrenDom DOM元素
子组件页面:

<script>
export default {
    data() {
        openData: false
    }
}
</script>
Logo

前往低代码交流专区

更多推荐