vue学习笔记-父组件给子组件传值（12）

最新推荐文章于 2024-05-29 17:42:35 发布

原创最新推荐文章于 2024-05-29 17:42:35 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue学习-父组件给子组件传值（12）

VUE 2 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了Vue中父组件向子组件传递数据和方法的多种方式，包括绑定属性、传递函数及整个实例，并演示了如何验证传值的合法性。

vue父组件给子组件传值

1.父组件给子组件传值

前提：先在home组件里面引入header组件；

<template>
  <div>
    <v-header></v-header>
    <hr>
    <h2>我是home组件</h2>
  </div>
</template>

<script>
  import Header from './Header.vue'
  export default{
    data(){
      return{
      
      }
    },
    components:{
      'v-header': Header
    }
  }
</script>

<style lang="scss" scoped>
  h2{
    color: red;
  }
</style>

例子：我们想把home组件里title的值传给子组件header并显示

data(){
      return{
        title:'首页'
      }
    },

实现步骤：
1.在Home.vue里面动态绑定title属性

<v-header :title="title"></v-header>

2.在Header.vue里面接收父组件的传值

props:['title'] //与data，methods同级

3.使用title

<h2>头部组件--{{title}}</h2>

运行效果如下：
在这里插入图片描述

2.父组件给子组件传方法

1.在home组件里面写一个方法

methods:{
      runFn(){
        alert("我是home组件的runFn方法")
      }
    },

2.动态绑定runFn方法 (同绑定title一样)

<v-header :title="title" :runFn="runFn"></v-header>

3.在header组件里面接收父组件runFn方法 (同接收title一样)

props:['title','runFn']

4.使用runFn

<button @click="runFn">执行runFn方法</button>

运行效果如下
在这里插入图片描述

3.父组件整个实例传给子组件

步骤跟前面一样，这里就不重复写了

home组件里面

<v-header :title="title" :runFn="runFn" :home="this"></v-header>

header组件里面

methods:{
      getParent(){
        //alert(this.home.title);
        this.home.runFn()
      }
    },
    props:['title','runFn','home']

<button @click="getParent">获取父组件的数据和方法</button>

执行效果如下
在这里插入图片描述

4.验证父组件给子组件传值数据的合法性

此时props要用对象的格式而不是字符串数组的格式props:[‘title’,‘runFn’,‘home’]

props:{
      'title':String, //title是字符串类型
      'runFn':Function,
      'home':Object,
    }

我们将home组件里面title值改为Number类型我们验证是string类型

data(){
      return{
        title:1111
      }
    },

运行结果如下
在这里插入图片描述
报错提示我们得到的是数字1111而不是字符串‘1111’