14.Vue父组件给子组件传值

最新推荐文章于 2024-01-28 21:17:33 发布

鱿小鱼儿

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量442

点赞数 2

CC 4.0 BY-SA版权

分类专栏： VUE学习

本文链接：https://blog.youkuaiyun.com/qq_35329964/article/details/96837456

VUE学习专栏收录该内容

19 篇文章

订阅专栏

本文介绍Vue.js中父组件如何向子组件传递数据、方法及组件实例。通过具体示例展示了属性、方法传递的方式以及如何在子组件中使用这些传递过来的信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组建可以给子组件传属性，传方法还可以将整个父组件传给子组件
一、父组件给子组件传值：
（1）父组件传值：需要再调用时给子组件传递属性写法为：

 <v-body  v-bind:msg="msg"></v-body>

（2）子组件接收：需要在data同级定义props数组，父组件传几个属性，这就接收几个属性

 props:['msg']

（3）调用：属性值可以直接在子组件中绑定显示{{msg}}

二、父组件给子组件传方法：
（1）父组件传方法：需要再调用时给子组件传递属性写法为：

< v-body  v-bind:run="run"></v-body>
run方法不能加括号，加括号表示方法的执行

（2）子组件接收：需要在data同级定义props数组，用法同接收属性

props:['run']

（3）调用：子组件可以在组件内写button调用父组件传来的方法run()

三、父组件将整个组件传给子组件
（1）父组件传组件：需要再调用时给子组件传递属性写法为：

  < v-body   v-bind:home='this'>

这里this就指的是当前的父组件；
（2）子组件接收：需要在data同级定义props数组，用法同接收属性

   props:['home']

（3）调用：可以this.home.属性名或者方法

       console.log(this.home.title);
        //this.home表示home组件
        this.home.run();

完整例子：

home.vue
<template>
    <div>
        这是一个Home组件
        <v-body  v-bind:msg="msg" :run="run" v-bind:home='this'></v-body>
    </div>
</template>
<script>
import Body from './Body.vue'
export default {
    data(){
        return{
            msg:'我是home组件的msg',
            title:'我是home的title'

        }
    },components:{
        'v-body':Body
    },methods:{
      run(){
          alert('home组件的方法执行了')
      }
    }
}
</script>
<style lang="scss">

</style>

Body.vue
<template>
    <div>
        这是一个Body组件--{{msg}}
        <button @click="run()">执行父组件的方法</button>
        <button @click="getparent()">获取父组件的数据和方法</button>
    </div>
</template>
<script>

export default {
    data(){
        return{}
    },props:['msg','run','home'],
    methods:{
        getparent(){
            console.log(this.msg);
            console.log(this.home.title);
            //this.home表示home组件
            this.home.run();
        }
    }
}
</script>
<style lang="scss">
 
</style>