Vue 组件传参 prop/emit

学习了组件用法,就像一种嵌套引用关系,在这个关系中,经常会涉及相互传数据的需求,即父组件传子组件,子组件传父组件。
父、子组件的关系可以总结为: prop 向下传递(父传子), emit 事件向上传递(子传父),如下图所示:

Vue 组件传参 prop/emit_第1张图片

Vue 组件传参 prop/emit_第2张图片

App.vue它是一个父组件,然后Test和HelloWord,这两个其实就是子组件。这里就是将父组件msg的值传递给了子组件。

组件之间的数据是要相互传递的,这里的组件对于整个页面来说,子组件和父组件。

父组件要往子组件里面传数据, 因为有时候子组件的页面展示内容是由你父组件决定的。那父组件给子组件传参的时候来决定子组件到底传递什么内容。

父组件是如何传递给子组件的数据?在子组件当中定义props属性即可。



或者下面写法也行
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      Type: String,
      default: ''
    }
  }
}

当你在子组件定义了父亲组件传给子组件的props,定义之后也不需要去子组件data里面去声明了,可以直接使用,将这个值放到template里面的。