Vue中$emit的用法

西瓜鱼仔 0.1222020.01.08 09:39:43字数 31阅读 8,108

子组件可以使用$emit调用父组件的方法并传递数据

示例

子组件：

 

父组件：

// 1）第1步：导入组件

import child from ‘./components/child’

export default {

　　name:"app",

　　// 2）第二步：组件

　　components：{

　　//在组件components中建立组件

　　child

}，

整个逻辑理顺。

// 1）第1步：导入组件。  在父组件script标签下面导入子组件

// 2）第2步：建立组件。  在script下面的export default中的components中建立组件

// 3）第3步：在html中写组件标签，然后显示界面就可以看到子组件的内容。

第4步，在父组件的methods中建立自定义事件showChildMsg。   在html写的子组件标签中调用事件@childMsg="showChildMsg"   【就是父元素总写一个事件，在html中调用就可以了。】

第5步，在子组件中写一个点击的html的button，button被点击之后引发一个事件变化，在子组件methods中建立一个事件，sendMsgToParent函数中，用this.$emit("childMsg","HELLO WORLD!");和父组件建立关联。

---

---

---

---

组件嵌套。首先是，将子组件与父组件建立连接。

1.在父组件当中导入子组件，在script标签下面写import。

2.在父组件当中script下面的组件components下面注册子组件。【在父组件components中注册组件。】

3.在父组件中的html部分写子组件的标签。就能显示子组件的内容，建立好了连接。

---

---

知识点：组件传值

---

---

父组件向子组件传递数据的步骤。父组件传给子组件，使用属性传递。组件传值，父传子，属性传递。

1.在父组件中的html写的子组件的标签里面:msg="message"，写上一个属性，属性的里面写的是父组件的data中的是值。

2.在子组件中，把父组件的写的子组件标签中的属性名保存到子组件的export default下面的props数组当中。

　　　　　　　　export default {props:[""]}      属性的属性

3.在子组件中，在子组件的html标签h1中显示数组中的值。

---

---

// 子组件传给父组件的步骤。     子组件向父组件传递数据，使用自定义事件传值。组件传值，子传父，事件传值。 // 1）在子组件中，写button标签。。。。比如点击子级的按钮button。button元素标签。被点击之后触发了事件，传递给父级。 // 2）在子组件的一开始建立的三步。在父组件的子组件标签中，写上绑定的事件@myEvent="changeData"     同时在methods里面写上changeData(){}函数。在父元素的data里面声明一个数据childData:"",在div中标签中写表达式

{{childData}}

使用到data当中的数据。changeData事件获取到子组件给父组件的值。 // 3）在子组件中，button绑定函数点击之后触发的事件@click="sendData"。然后在子组件的方法methods中写函数sendData(){}  里面写this.$emit方法，用$this.emit就可以触发父组件的事件，this.$emit("myevent",this.childData)就可以触发父组件中的myevent的事件，后面写值。   // 在子组件中写data,data函数里面的声明变量childData:"I’m child"  就是data(){return{childData:"I'm child"}} // 在子组件的methods的方法中写sendData(){this.$emit("myevent",this.childData)} // 在父组件中的methods方法中写函数methods(childData){console.log(childData)}

---

---

---

例子

今天就是看完4 5  6课程，看完弄理解明白，就这些事情，其他都不重要。

努力吧，努力过了。话慢慢说。

你敲得太少了。花的功夫太少。多敲多用就会了。

js没学没基础很重要，我很多很多不会。自己找时间学，一点点小的进步也是进步很重要。小学不会加减乘除也不想那么多，学一点知识算一点知识。实事求是，找办法解决比较重要。

慎思之。基础理论理清楚。我自己的任务。

学知识就是物理写错题集。写的很详细。

自尊自爱自立自强。

物理错题集 附纸订正，就是呢，每个知识详细解释，先看课先学当下在学的东西。

学知识很重要。要带走的是知识。