Vue 子组件传父组件

Posted 2020-08-17 斯塔克林

vue中的传值是个很烦的问题，记录一下自己完成的这个需求。

首先，被引用的称之为子组件，当前页面为父组件，这个不能搞错。

• 子组件传值，要用到this.$emit。
• 子组件页面，需要在一个函数中使用this.$emit的方法来传。

 saves () {
      localStorage.setItem('note', this.note);
      this.h1 = localStorage.getItem('note');
      console.log(this.h1)
      // this.conShow = true
      // this.show = false
      // this.showBtn = true
      // 向父传
      this.$emit('hello', this.h1)  第一个参数是自定义的方法，第二个是要传的参数

    },

• 接下来是父组件
• 在父组件中，找到引用的这个组件，然后注册(v-on/@)刚刚在子组件定义的方法，这个很重要，在别的地方引用是拿不到的

<editor @hello='getHello'></editor>  editor是我引用的这个子组件。 =====hello是之前子组件中定义的那个方法，进行@，然后后面的getHello则是我们定义的方法。

• 在methods中：

这里的getHello就是我们自己在上面定义的事件了
// 接子组件的参数，
    getHello (data) {  使用data来接收传过来的参数
      this.dcd = data  然后这里就可以对这个参数进行各种操作了
    },

彩蛋时间

• 父和子传值是有语法糖的，可以使用.sync修饰符
• 只要在想要同步的值后面加上.sync，就会自动同步，父组件改了，子组件也会跟着变，相当于双向绑定
• 使用方法如下，在引入的子组件中，绑定一个事件(m是我自己定义的，随便写)，后面.sync=‘你要传的数据‘

<child :m.sync='money'></child>

不要忘记在子组件props接收传过来的参数！！！

props: {
    m: String
  }

• 如果你只是需要子组件拿到父组件的参数，那么上面这两步就已经完成双向绑定了，如果子组件需要传递参数给父组件，接着往下看??

• 在子组件里，定义一个传参的方法

 getMore() {
            this.$emit('update:m', '给你8888') 这里和之前不同的是，update是固定的语法，不可改，:后面的m是你在父组件里绑定的那个事件，第二个参数一样是要传过去的值。
          }

• 这样一来，两个组件的值就是同步的了，只要有一边改变，另外一边也会对应改变。