weixin_44679841 2019-07-23 16:34 采纳率: 100%
浏览 514
已采纳

关于 vue 父子组件之间的通信问题

请各位大神帮我看看问题在哪里,不知道为啥传值失败了,小弟初学前端,功力太浅,望各位大神指教!

这是 html 部分:
图片说明

这是 js 部分:

图片说明

多谢各位大神!

---------------------------------------更新线---------------------------------
这是源代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg" @fromChild="change"></child>
    </div>
  </div>

  <script>
    // 注册
    Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 同样也可以在 vm 实例中像 “this.message” 这样使用
      template: '<span @click="toParent">{{ message }}</span>',
      methods: {
        toParent: function () {
          this.$emit('fromChild', '子向父传值,改变父的值。');
          console.log("It has worked!");
        }
      }
    })
    // 创建根实例
    new Vue({
      el: '#app',
      data: {
        parentMsg: '父组件内容'
      },
      methods: {
        change: function (msg) {
          this.parentMsg = msg;
          console.log(msg);//没有结果,控制台没报错。
        }
      }
    })
  </script>
</body>

</html>
  • 写回答

1条回答 默认 最新

  • doncha 2019-07-23 17:20
    关注

    把fromChild改成from-child,vue2.0规范了命名

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝