vue中$emit的用法 有什么作用

Vue中$emit的用法

西瓜鱼仔关注

0.1222020.01.08 09:39:43字数 31阅读 8,108

子组件可以使用$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没学没基础很重要，我很多很多不会。自己找时间学，一点点小的进步也是进步很重要。小学不会加减乘除也不想那么多，学一点知识算一点知识。实事求是，找办法解决比较重要。

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

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

自尊自爱自立自强。

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

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