• 内容参考
    vue官网-组件基础

https://cn.vuejs.org/v2/guide/components.html

以下只是我一些不成熟的理解,建议大概扫一眼官网文档再阅读

父组件传递给子组件

子组件定义自定义参数(Prop),父组件传参。

当子组件增加一个prop属性 那么对应的函数名就是你自定义的参数

  • 子组件
<template>
  <v-md-editor/>
</template>

<script>
export default {
  props: {
# 自定义String类型参数text,父组件就可以使用`v-bind:text` 传值
    text: String
  }
</script>

如上代码,在父组件引用子组件的时候,加上:text="xxx",就已经把xxx以参数形式传递给子组件了(如下)

  • 父组件
<markdown :text="xxx" />
// :text 与 v-bind:text 同等含义
<script>
# 注册子组件
import Markdown from '@/components/Markdown'
export default {
  components: { Markdown }
}
</script>

子组件传递给父组件

子组件使用内建方法$emit
子组件通过调用内建$emit方法并传入事件名称来触发一个事件,达到子组件传递给父组件的目的

  • 子组件
<script>
export default {
# 自定义指令'getChildrenText' 并将子组件的data函数中的childrenText属性,通过参数传递给父组件
  mounted() {
    this.$emit('getChildrenText', this.childrenText)
  }
}
</script>
  • 父组件
<markdown @getChildrenText="getChildrenText" />
<script>
export default {
 methods: {
# 也就是使用自定义指令的地方'@getText'会接收到子组件的childrenText
    getChildrenText(val) { # val为上个代码块的参数'this.childrenText'
      this.fatherText = val # 让父组件的值等于子组件传递过来的值
    }
}
</script>
Last modification:July 3rd, 2020 at 09:46 pm
如果觉得我的文章对你有用,请随意赞赏