Vue中$emit的用法
西瓜鱼仔
0.1222020.01.08 09:39:43
子组件可以使用$emit调用父组件的方法并传递数据
示例
子组件：
<template>
<div>
<button @click="sendMsgToParent">向父组件传值</button>
</div>
</template>
<script>
export default {
methods: {
sendMsgToParent:function () {
this.$emit("childMsg","hello world!");
}
}
}
</script>
父组件：
<template>
<div id="app">
//@childMsg 与子组件中this.$emit("childMsg","hello world!")起的名字一致
<child @childMsg="showChildMsg"></child>
</div>
</template>
<script>
import child from './components/Child'
export default {
name: "app",
components: {
child
},
methods:{
showChildMsg:function (data) {
console.log(data);
}
}
}
</script>
// 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中标签中写表达式<h1>{{childData}}</h1>使用到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)}
例子
<template>
<div>
<!-- 这是父组件App.vue -->
<!-- 为什么这么写？表达式，绑定data中的childData -->
<h1>{{childData}}</h1>
<!-- <div :msg="message">你好啊</div> -->
<!-- 3.使用组件，然后组件里的东西就可以显示出来的。meg是属性。事件。给child组件绑定一个方法myEvent.在这边会显示子组件的内容。 -->
<!-- ???子传父。利用事件传递。在父组件的子组件标签中写一个事件myEvent,myEvent的值是函数changeData -->
<ZiChild :msg="message" @myevent="changeData"></ZiChild>
</div>
</template>
<script>
// 今天学习任务。4 5 6 记不住记手写笔记。便于翻阅。要理解成自己的知识，为什么这么写才行。不写可以为什么不行？不会就要多看几遍，一直看，用心看。
// 组件嵌套。1把组件导入到这个要导入的文件中。2在export中新建组件。3在html中写组件标签。就把需要的组件导入进来了。就可以在界面显示了。
// 父级向子级传递数据，使用属性传递
// 1.导入子组件。
import ZiChild from "./components/ZiChild.vue";
export default {
// 2.新建组件
components:{ZiChild},
// 数据
data(){
// 返回数据
return{
// App.vue data这是App.vue里的数据
message:"app.vue data",
// 新建的数据
childData:""
}
},
// 子级向父级传递数据，使用自定义事件。
methods: {
// 自定义事件。在changeData中改变
changeData(childData){
// 这是调试数据，看看控制栏有没有数据显示输出，console.log就是输出的意思。
// console.log(childData);
// 显示出新的新的数据
this.childData=childData;
}
}
}
</script>
<style>
</style><template>
<div>
<!-- 这是子组件ZiChild.vue -->
<h1>hello world你好世界</h1>
<!-- 在。显示export default里面的props -->
<div>{{msg}}</div>
<!-- 一个按钮的html,当点击时发送数据 -->
<button @click="sendData">点击按钮传递数据子传父</button>
</div>
</template>
<script>
// 子级向父级传递数据，用的是自定义事件
export default {
// 属性的特性，里面写信息。
props:["msg"],
data(){
return{
childData:"I'm child.子组件"
}
},
methods:{
sendData(){
// $emit的作用。$emit的方法就可以触发父组件的内容。$emit里面写的前面是写的自定义事件，后面是传的值。
// 上传的文件，这个旁边有改动的地方，那么就点击那个。
this.$emit("myevent",this.childData)
}
}
}
// 子级传给父级的步骤 子级向父级传递数据，使用自定义事件传值。
// 1）在子组件中，写button标签。。。。比如点击子级的按钮button。button元素标签。被点击之后触发了事件，传递给父级。
// 2）在子组件的一开始建立的三步。在父组件的子组件标签中，写上绑定的事件@myEvent="changeData" 同时在methods里面写上changeData(){}函数。在父元素的data里面声明一个数据childData:"",在div中标签中写表达式<h1>{{childData}}</h1>使用到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)}
</script>
<style>
</style>
今天就是看完4 5 6课程，看完弄理解明白，就这些事情，其他都不重要。
努力吧，努力过了。话慢慢说。
你敲得太少了。花的功夫太少。多敲多用就会了。
js没学没基础很重要，我很多很多不会。自己找时间学，一点点小的进步也是进步很重要。小学不会加减乘除也不想那么多，学一点知识算一点知识。实事求是，找办法解决比较重要。
慎思之。基础理论理清楚。我自己的任务。
学知识就是物理写错题集。写的很详细。
自尊自爱自立自强。
物理错题集 附纸订正，就是呢，每个知识详细解释，先看课先学当下在学的东西。
学知识很重要。要带走的是知识。
