具体应用场景是这样子的，我在 app.vue 中有个路由,这个路由会加载 c.vue ,m来自 c.vue ，如何把m传给app.vue，我想在app.vue中监听m的变化如何做?就是c.vue中的m值变化，app.vue中也会跟着变化。 <router-link>{{m}}<router-link> 我查到可以用 emit 触发，但是emit父组件中貌似是要有事件的，如何让 c.vue 中m变化实时传给 app.vue .

用vuex试试。或者弄个 bus，用 bus.$emit bus.$on

最好是用 vue bus 或者是 vuex ，或者是在 c.vue 里面 $emit 一层一层上去，通知到 App.vue

vue子组件向父组件传值问题

具体应用场景是这样子的，我在 app.vue中有个路由,这个路由会加载c.vue,m来自c.vue，如何把m传给app.vue，我想在app.vue中监听m的变化如何做?就是c.vue中的m值变化，app.vue中也会跟着变化。

<router-link>{{m}}<router-link>

我查到可以用emit触发，但是emit父组件中貌似是要有事件的，如何让c.vue中m变化实时传给app.vue.

阅读 12.2k

你的问题可以分成两个点：1. 怎么监听一个值的变化； 2. 怎么从子组件向父组件发送一个值；

使用`this.emit`向上传值

可以参照下面我打过的例子：

    <div id="app">
        <p>{{total}}</p>
        <button-counter @click="incrementTotal"></button-counter>
        <button-counter @click="incrementTotal"></button-counter>
    </div>

    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        Vue.component('button-counter', {
            template: '<button @click="incrementCounter">{{counter}}</button>',
            data: function () {
                return {
                    counter: 0
                }
            },
            methods: {
                incrementCounter: function () {
                    this.counter += 1
                    this.$emit('click')
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                total: 0
            },
            methods: {
                incrementTotal: function () {
                    this.total += 1
                }
            }
        })

使用`vuex`

用vuex话比较简单，你只要声明一个state状态树，mutations以及getters。
state用来存储全局状态，mutations用来设置state，getters用来获取state
这样在子组件向父组件传值的话只需要设置相应的state，在父组件就可以直接获取了，如果要监听变化的话最好在父组件再加一个computed属性

以上

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>/title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ giveData:{ a:'我是父组件数据' } }, components:{ 'child-com':{ props:['msg'], template:'#child', methods:{ change(){ //this.msg='被更改了' 不要这样做 this.msg.a='被改了'; //传递的是msg，要改变msg.a才能同步 } } } } }); }; </script> </head> <body> <template id="child"> <div> <span>我是子组件</span> <input type="button" value="按钮" @click="change"> <strong>{{msg.a}}</strong> </div> </template> <div id="box"> 父级: ->{{giveData.a}} <br> <child-com :msg="giveData"></child-com> </div> </body> </html>

vue子组件向父组件传值问题

使用`this.emit`向上传值

使用`vuex`

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？

vue子组件向父组件传值问题

使用this.emit向上传值

使用vuex

你尚未登录，登录后可以

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

如何实现从一个div中拖拽dom到另一个div容器？

electron如何屏蔽鼠标上的前进后退快捷键？

使用`this.emit`向上传值

使用`vuex`