Vue组件之间相互传值

一、如图,完成从index.vue传递指定的test值,到components文件夹下的子组件popManager.vue中:


image.png

1.1、popManager.vue代码如下:
使用props接收传递过来的值


image.png
mounted () {
    console.log('test--',this.test)
},

1.2、index.vue代码如下:
template布局:

<pop-Manager :test='testMsg' v-if="showPop"></pop-Manager>

script:

export default {
        data() {
            return {
                showPop: false,
                testMsg: '车时效性',
                
            }
        },

二、popManager.vue向index.vue传值
2.1、popManager.vue中使用this.$emit('key',name)传递代码如下:

<view class="item" v-for="item in list" :key="item.id" @click="chooseClick(item)">
</view>
chooseClick (item) {
    this.$emit('chooseItem',item.name);
},

2.2、index.vue代码如下:

<pop-Manager :test='testMsg'  @chooseItem="getItem"></pop-Manager>
getItem(name) {
   console.log('name--',name);
},
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容