vue组件传值操作（父子，兄弟组件之间）

最新推荐文章于 2024-03-06 13:51:03 发布

北鳴

最新推荐文章于 2024-03-06 13:51:03 发布

阅读量441

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_48834760/article/details/109538634

版权

本文详细介绍了Vue组件化的三种传值场景：父组件向子组件通过props传递数据，子组件使用$emit向父组件传值，以及通过事件中心实现兄弟组件之间的数据通信。通过实例代码展示了具体操作，强调Vue虽然规则多，但在项目开发中的实用性。

摘要由CSDN通过智能技术生成

前言

组件化开发是vue中的重要内容，vue框架写项目的时候，组件化结构很明晰，这样不仅提高了办公的效率，同时使代码有了更好的移植性，本文整理了组件基础内容中的三种传值问题，希望对阅读者有所启发

提示：以下是本篇文章正文内容，下面案例可供参考

一、三种传值场景

1.父组件向子组件传值

父组件给子组件传值

1.父组件调用子组件的时候绑定动态属性（这里绑定的是value）
2.在子组件里面通过 props接收父组件传过来的数据
3.直接在子组件里面使用

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
     <father></father>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    Vue.component('father',{
   
        data:function(){
   
            return{
   
                fathervalue:123
            }
        },
        template:`<div>
        <div>父组件的值{
   {
   fathervalue}}</div>
        <son :value="fathervalue"></son>
        </div>`
    })//定义父组件， ：value中绑定的值为父组件的值，将通过：value传递给子组件
    Vue.component('son',{
   
        props:[

最低0.47元/天解锁文章

北鳴

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue组件传值操作（父子，兄弟组件之间）

前言组件化开发是vue中的重要内容，vue框架写项目的时候，组件化结构很明晰，这样不仅提高了办公的效率，同时使代码有了更好的移植性，本文整理了组件基础内容中的三种传值问题，希望对阅读者有所启发提示：以下是本篇文章正文内容，下面案例可供参考一、三种传值场景1.父组件向子组件传值父组件给子组件传值1.父组件调用子组件的时候绑定动态属性（这里绑定的是value）2.在子组件里面通过 props接收父组件传过来的数据3.直接在子组件里面使用代码如下（示例）：<!DOCTYPE htm.
复制链接

扫一扫

专栏目录