Vue 组件传参 prop向下传递、emit向上传递

组件传参

---

学习了组件用法，就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需求，即父组件传子组件，子组件传父组件。

父、子组件的关系可以总结为 : prop 向下传递(和事件无关)， emit 事件（包含事件）向上传递。

如下图所示： 所有的组件组成了完整的页面，但是组件里里面的数据与组件之间的数据是相互进行数据传递的。（ 组件之间存在着相互引用，这就存在了父子关系）

有时候子组件页面的展示，展示什么样的内容是由父组件决定的，这时候父组件给子组件传参的时候就需要通过参数告诉子组件需要展示什么样的内容。

父组件里面:
--------------------------------------------------------------------
子组件里面:


//然后将要传递的值放在template里面的h1里面去做展示

HelloWorld这个组件（页面），它的标题是由父组件App.vue来决定内容的。

 

 

 

 props向下传递

---

先去子组件里面定义props，在props里面定义要向下传递的数据content。

然后去父亲组件里面定义要传递的数据。 

上面就是父传子的一个方式，有点像定义了一个标签，然后将属性传递进去，这个属性在子组件里面可以放在模板里面使用或者放在script里面使用，都行。

v-bind的方式传参：这样可以通过动态绑定的方式传递进去，子组件可以使用父组件的数据，相当于子组件就是父组件里面的html标签

 

 

emit子传父

---

如果子组件里面的数据发生了变化，父组件要拿到变化的数据，这怎么办？在子组件里面定义好emit事件名称，在父组件里面使用v-on进行接收。接受的是一个方法，方法并且不能使用括号。

这里的事件名称自定义即可。之前大部分事件都是内置的click keybord:enter这种事件，现在可以在子组件里面去定义自己的事件了。

如果你要监听很多数据，可以将这些数据放在一个对象里面统一做处理。

 父组件