Vue中$emit的用法

vue中em和rem的使用_html

西瓜鱼仔

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

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

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

自尊自爱自立自强。

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

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