vue子页面向父页面传参

Question

// page A

<h1>{{pageDataA}}</h1>
<router-link to="PageB">pageb</router-link> 

data:{
    pageDataA:'苹果'
}

// page B

<li @click="toThis">香蕉</li>
<li @click="toThis">橘子</li>

pageA中pageDataA现在显示苹果，路由跳转到pageB后,toThis()选择不同的水果赋值到pageDataA,应该怎么处理？

Answer 1

不是很明白你的意思。。
不过如果是要把pageB的水果放到pageA的变量里，或许可以看看这里非父子组件通信。既然看到vue router的话或许你可以试试vuex了。

如果这两个组件在写在同一个文件里的话，也可以先将pageA的Vue实例注册到一个全局变量vm里，然后vm.$data.pageDataA='香蕉'，不过不推荐这种方式

Answer 2

props子页面向父页面传参的属性，具体用法还没整明白。。就知道有这个东西！！

Answer 3

pageB -> dispatch action -> mutate store -> pageA

Answer 4

这是两个独立组件，并非是父子组件。既然是router-view了，那由A切到B，那A的生命已经完犊子了，所以你使用$emit也是通知不到的。

所以最好的方案就是使用vuex去实现，toThis向store中修改数据状态，到A页面之后A去读取对应的数值。

Answer 5

用vuex就好了，其他的用起来真的特别麻烦

    //引入vuex.js
    <script src="/static/js/vue/vuex.js"></script>
    
    //声明vuex
    const store = new Vuex.Store({
        state: {
            fruit: "",
        }
    });
    
    //直接用这个值，用起来有点像全局双向绑定
    store.state.fruit = "苹果"

Answer 6

如果单纯地想传参给父组件，可以在子组件用emit触发父组件的方法，此时可以传参过去，不过还是推荐使用vuex！

Answer 7

vue-router本身支持 vm.$route.params 参数获取的，你可以参照官方文档: https://router.vuejs.org/zh-c...

Answer 8

$emit 去搜下官方文档