vue父子组件传递数据方法

标签（空格分隔）： vue

---

父组件向子组件传递数据

1. Vue中父组件向子组件传递数据用props

举个例子

父组件中：

<template>
    <div>
        <v-mainScene :show-main-scene="isShowMainScene"></v-mainScene>
        <-- 这个地方注意showMainScene一定要用-将驼峰命名分开 -->
    </div>
</template>
<script>
    import mainScene from '../mainScene/mainScene.vue';
    export default {
        data() {
            return {
                isShowMainScene: '我来自父组件'
            };
        },
        components: {
            'v-mainScene': mainScene
    },
    };
</script>

子组件中：

<template>
    <div>
        {{myShowMainScene}}
        <--  这个地方就会打印传过来的‘我来自父组件’ -->
    </div>
</template>
<script>
    export default {
        props: {
            showMainScene: String
        },
        data() {
            return {
                myShowMainScene: this.showMainScene
            };
        }
    };
</script>

注意：

• 父组件中标签中，驼峰命名法一定要用写成-分开的形式，不可直接写驼峰命名传值
• 子组件中，如果直接用props中showMainScene也可以渲染，但控制台会报错，这是vue2.0中修改的部分，禁止这么用，所以应该在data中命名一个数据接收这个数据

2.子组件向父组件传值

举个例子

父组件中：

<template>
    <div>
        <v-mainScene 
        :show-main-scene="isShowMainScene"
        @on-show-main-scene="onShowMainScene"
        ></v-mainScene>
        <-- 这个地方注意showMainScene一定要用-将驼峰命名分开 -->
    </div>
</template>
<script>
    import mainScene from '../mainScene/mainScene.vue';
    export default {
        data() {
            return {
                isShowMainScene: '我来自父组件'
            };
        },
        methods: {
        onShowMainScene(val) {
            //此处的传进来的参数val实际上就是子组件传过来的值
            this.isShowMainScene = val;
        },
        components: {
            'v-mainScene': mainScene
    },
    };
</script>

子组件中：

<template>
    <div>
        <span>{{myShowMainScene}}</span>
        <--  这个地方就会打印传过来的‘我来自父组件’ -->
        <div @click="changeData">点我改变</div>
    </div>
</template>
<script>
    export default {
        props: {
            showMainScene: String
        },
        //设置监听,传值关键的步骤
        watch: {
            showMainScene(val) {
                //此处父组件继续传值给子组件，父组件可在methods中改变传来的值，子组件在这里接收
                this.MyShowMainScene = val;
            },
            //下面即实现了子组件改变父组件值
            myShowMainScene(val) {
                this.$emit('on-show-main-scene', val);//此处实现了双向绑定，子组件可以改变父组件值
            }
        },
        data() {
            return {
                myShowMainScene: this.showMainScene
            };
        },
        methods: {
            changeData() {
                this.myShowMainScene = '我来自子组件'
            }
        }
    };
</script>

总结：子组件向父组件传值步骤：

• 父组件标签中设置传的数据：

   show-main-scene="isShowMainScene"

• 父组件标签中设置接收子组件传过来的监听

   @on-show-main-scene="onShowMainScene"

• 父组件中在methods中接收组件传来的值，在onShowMainScene中设置

    onShowMainScene(val) {
            //此处的传进来的参数val实际上就是子组件传过来的值
            this.isShowMainScene = val;
        },

• 子组件中在props中接收父组件值props: {showMainScene: String}

  props: {showMainScene: String}

• 子组件data中初始化一个数据接收子组件传来的值

 myShowMainScene: this.showMainScene

• 子组件中设置监听

  watch: {
           showMainScene(val) {
               //此处父组件继续传值给子组件，父组件可在methods中改变传来的值，子组件在这里接收
               this.MyShowMainScene = val;
           },
           //下面即实现了子组件改变父组件值
           myShowMainScene(val) {
               this.$emit('on-show-main-scene', val);//此处实现了双向绑定，子组件可以改变父组件值
           }
       },

3.总结
vue是使用很广泛的一种mvvm框架，但数据传值问题困扰了很多人，希望此文对数据传值有疑惑的vue爱好者有所帮助。