十三、Vue之 父组件传值给子组件 和 子组件传值给父组件

一、父组件传值给子组件

  父子组件之间的传值主要有三种：传递数值、传递方法、传递对象，主要是靠子组件的 props 属性来接收传值，下面分别介绍：

（一）传递数值

1.子组件：Header.vue

<template>
    <div>
        <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 -->
        <h2>{{msg}}</h2>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
    },
    // 接收父类的传值
    props: ['msg']
}
</script>

  可以看到，在子组件中的data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性，接收就是靠 props: ['msg']。

2.父组件Home.vue

<template>
    <div>
        <!-- 2.使用子组件，并向子组件传值 -->
        <v-head :msg="msg"></v-head>

        <br>
        <br>
    </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
    data() {
        return {
            msg: '我是一个组件'
        }
    },
    methods: {
    },
    components: {
        "v-head": Head
    },
    // 页面刷新时请求数据
    mounted() {
    }
}
</script>

  传值的核心思想就是，在使用子组件的地方，加上要传递的值：<v-head :msg="msg"></v-head>

（二）传递方法

  传递方法的写法和传递数值一样，下面只写出关键步骤：

父组件

<template>
    <div>
        <!-- 2.使用子组件，并向子组件传值 -->
        <v-head :run="run"></v-head>

        <br>
        <br>
    </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
    data() {
        return {
            msg: '我是一个组件'
        }
    },
    methods: {
        run() {
            alert(this.msg);
        }
    },
    components: {
        "v-head": Head
    },
    // 页面刷新时请求数据
    mounted() {
    }
}
</script>

子组件

<template>
    <div>
        <button @click="run">接收父组件的方法</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
    },
    // 接收父类的传值
    props: ['run']
}
</script>

（三）传递对象

  传递对象的写法和传递数值一样，下面只写出关键步骤：

父组件

<template>
    <div>
        <!-- 2.使用子组件，并向子组件传值，这里的 this 就是 Home 组件 -->
        <v-head :home="this"></v-head>

        <br>
        <br>
    </div>
</template>

<script>
// 1.引入子组件
import Head from './Head.vue';

export default {
    data() {
        return {
            msg: '我是一个组件'
        }
    },
    methods: {
        run() {
            alert(this.msg);
        }
    },
    components: {
        "v-head": Head
    },
    // 页面刷新时请求数据
    mounted() {
    }
}
</script>

子组件

<template>
    <div>
        <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 -->
        <h2>{{msg}}</h2>
        <br>
        <br>
        <button @click="run">接收父组件的方法</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 调用传过来的home组件的msg属性
            msg: this.home.msg
        }
    },
    methods: {
        run() {
            // 调用传过来的home组件的run()方法
            this.home.run();
        }
    },
    // 接收父类的传值
    props: ['home']
}
</script>

（四）传递数值类型校验

	props: {
        'home': Object
    }

其他和上面类似！

二、子组件传值给父组件

1.子组件

<template>
    <ul class="list">
        <li 
        class="item" 
        v-for="(item,key) of cities" 
        :key="key"
        @click="handleLetterClick">
        {{key}}
        </li>
    </ul>
</template>
<script>
export default {
    ...
    methods: {
    	//传值给父组件（广播）
        handleLetterClick (e) {
            this.$emit('change', e.target.innerText)
        }
    },
}
</script>
<style lang="stylus" scoped>
    .....
</style>

2.父组件

<template>
  <div>
    ......
    // 接收子组件传值
    <city-alphabet :cities="cities" @change="handleLetterChange" />
  </div>
</template>
<script>
.....
import CityAlphabet from "./components/Alphabet"

export default {
  components: {
    ......
    CityAlphabet
  },
  data() {
    return {
      ......
      letter: ''
    }
  },
  methods: {
    .....
    //接收子组件传值逻辑
    handleLetterChange (letter) {
      this.letter = letter
    }
  },
  .....
};
</script>
<style lang="stylus" scoped></style>