4.3 vue-cli子父组件传值

  • 上一篇文章讲了vuex的传值https://www.jianshu.com/writer#/notebooks/35689521/notes/51208965
    这篇来说一下另外一种传值方式,子父组件传值。
  • 1.首先注册子组件,谁调用组件,谁就是父组件。子组件注册有全局注册和局部注册。
在main.js中全局注册
image.png
在父组件中局部注册
image.png
  • 2.我使用的是全局注册,在父组件中使用子组件
    我的操作是父组件调用子组件的方法,子组件的方法需要使用到父组件中的值。


    image.png

    image.png
  • 3.子组件传值给父组件(子组件通过this.$emit()的方式将值传递给父组件)
    image.png

    image.png

    image.png

    中间出现
    image.png
    这样的报错,解决方案:https://stackoverflow.com/questions/43073797/vue-js-this-emit-is-not-a-function#就是不要使用箭头函数写法。获取this的指向。
    image.png

你可能感兴趣的:(4.3 vue-cli子父组件传值)