vue零散记录之父子组件传值

最新推荐文章于 2024-11-04 09:03:28 发布

原创最新推荐文章于 2024-11-04 09:03:28 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

13 篇文章

订阅专栏

本文介绍Vue.js中父组件与子组件间的通信方式，包括如何通过$emit实现子组件向父组件传递值，以及父组件如何接收这些值。同时，还探讨了输入框使用v-model时的注意事项。

1.input 使用了v-mode绑定值，不需要在写value；

2.子组件传值给父组件：$emit

父组件可获取子组件值：

举例：

父组件：parentServe.vue

<template>
  <div>
    <child-serve   @colorShow="ifshowColor"><!-- 这里是子组件传来的事件colorShow-->
    </child-serve>
  </div>
</template>

<script>
import childServev from "../components/childServe"

export default {
  methods:{
    showAdvice(advice){
      alert(advice)
    },
  },
  components:{
    child-serve:"childServe"
  },}
</script>

子组件：childServe

<template>
  <button @click="handleShowColor">
    我想弹窗传值给父组件呢
  </button>
</template>

<script>
  export default {
    data () {
      return {
        colorShow:false
    },
    methods:{

     handleShowColor (event) {

      event.stopPropagation();

      if (this.colorShow) {

        this.colorShow = false

      } else {

        this.colorShow = true

      }

       this.$emit("colorShow",this.colorShow);//colorShow是事件，this.colorShow是值

    },


  }
</script>

3.父组件传值给子组件的时候，是静态传值，如果子组件做操作，需要发起事件执行。

举例：-待补充

4.扩展知识：父子组件的加载顺序 - 按顺序执行，

如:先加载父组件，如过程发现子组件则执行子组件。最后输出结果。