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

  }