组件传值 vue知识2

不想被开，就好好努力。早点来公司，学呗。学习学编程，脑子越用越活。朝着一个方向努力。学代码比种地除草好多了。不要着急，把一个一个知识点理清楚很重要。

敲得太少，多敲点。。。。。。。这个视频讲的不细致，可以多找几个视频看。看播放量最高的/pink老师的js

将子组件放入到父组件当中去，建立连接，父组件中可以显示子组件的信息

1.在父组件中import导入子组件

2.声明组件

3.在父组件的html中写子元素的标签。

完成，那么在父组件现实的时候就可以显示子组件的内容。

---

---

 

口诀：父传子，用属性。子传父，用事件。

---

---

 

          父传子，用属性。

1）在父组件的子组件标签中写属性:msg="message"。在父组件的data方法中 返回声明数据。          只有data中声明了，别的地方才能写。任何时候，一定先声明。

2）怎么让子组件接受父组件的数据呢？将父组件中子组件标签绑定的属性msg，放到子组件export default下面的数组属性中props:“msg”。然后在子组件的html标签中写双大引号表达式，显示msg的值。

所以显示的时候，子组件的见面看到子组件的内容上面有父组件的值给了子组件显示出来了。

---

---

 

           子传父，用事件。

1）子组件中的点击事件button会产生返回数据sendData(){}方法函数   。在button标签中绑定sendData()方法函数。 在methods中声明方法函数sendData(){}

2）在父组件中，和子组件有关系的是在父组件里的子组件标签。在子组 件标签中绑定自定义事件myevent="changeData"。事件绑定的是changeData(){}这个方法函数。changeData中的数据是来自子级传过来的。。。。。在父组件声明一个新的数据message:"",在父组件的html中写一个标签,里面写双大括号表达式。<h1>{{message}}</h1>       

3）在父组件的子组件标签里绑定的事件，在子组件中sendData(){}可以通过this.$emit()方法来实现触发父组件中的方法，所以this.$emit方法后面，前面是父组件的方法，后面是值。this.$emit("myevent",this.message)   然后就触发了父组件中的myevent方法，把值传给了myevent绑定的changeData中的值，子组件导入的值，放在changeData(message)，放在changeData后面的小括号里面。。

4）在父组件中，可以用log控制栏检测一下，子组件的数据有没有传给父组件。然后写把传进来的数据复制给父组件中的数据。this.message=message;所以值在子元素被点击之后就变了。

所以在导出的过程中，按钮点击之前点击之后值会发生变化。。

---

---

---

 

例子还没有做。

---

---

---

 

非父子级传值：定义一个共享数据的状态。

两个同级的组件，互相之间传递数据。？？？？？没写完

 

 

 

 

 

 

 

 

 

 

 

 

用自己的话能说出来才是掌握了。学明白。学的慢，但是要学明白。被开了怎么办？？？我要留下来喝水。

coderwhy

标签：vue,标签,绑定,组件,message,方法,changeData,传值
来源： https://www.cnblogs.com/effortandluck/p/16403755.html