vue父子组件传参

最新推荐文章于 2024-03-26 14:57:51 发布

菜鸟搬砖记

最新推荐文章于 2024-03-26 14:57:51 发布

阅读量707

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue开发应用文章标签： vue 父子组件传参 Vue开发 js

本文链接：https://blog.youkuaiyun.com/hope93/article/details/98594816

Vue开发应用专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件与子组件之间的数据传递方法，包括如何使用props进行父组件向子组件的数据传递，以及如何利用事件机制实现子组件向父组件的信息反馈。同时，还探讨了如何通过ref调用子组件的方法。

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

父组件传给子组件

在父元素parent.vue中：

<template>
  <Child :parentToChild="parentToChild" />
</template>

<script>
import Child from "./child";
export default {
    name: "parent",
    components: { Child },
    data() {
        return {
            parentToChild: "我是父组件里面的数据"
        };
    }
};
</script>

在子元素child.vue中：

<template>
  <div>{{parentToChild}}</div>
</template>

<script>
export default {
    name: "Child",
    //props: ["parentToChild"]
    props: {
        parentToChild: String
    }
};
</script>

父子传参是通过props来传递的，切记props中从父级引入的数据都是不能在子元素组件中修改的

如果父组件要调用子组件中的方法时，应该如何呢？

这个时候就要用到ref了，给子组件添加一个ref然后通过获取ref节点，就可以调用子组件中的方法了

在parent.vue中：

<template>
    <div>
        <Child ref="child" />
        <div @click="click">获取儿子中的方法</div>
    </div>
</template>

<script>
import Child from "./child";
export default {
    name: "parent",
    components: { Child },
    methods: {
        click() {
            this.$refs.child.click(); //输出：子组件中的方法
        }
    }
};
</script>

在child.vue中：

<template>
    <div>儿子</div>
</template>

<script>
export default {
    name: "Child",
    methods: {
        click() {
            console.log("子组件中的方法");
        }
    }
};
</script>

子组件传给父组件

在父组件parent.vue中：

<template>
  <Child @toParent="parentMethod" />
</template>

<script>
import Child from "./child";
export default {
    name: "parent",
    components: { Child },
    methods: {
        parentMethod(val) {
            console.log("子组件触发");
            console.log(val); //爸爸，你好
        }
    }
};
</script>

在父组件中自定义一个toParent事件

在子组件child.vue中：

<template>
  <div @click="click">点击</div>
</template>

<script>
export default {
    name: "Child",
    methods: {
        click() {
            this.$emit("toParent", "爸爸，你好");
        }
    }
};
</script>

子组件中通过this.$emit来触发父组件中自定义事件toParent,并且传递参数过去，父组件中可以接收子组件传过来的参数