父组件和子组件之间的相互传值

最新推荐文章于 2024-05-29 18:55:00 发布
最新推荐文章于 2024-05-29 18:55:00 发布
阅读量7.9k 收藏 17
点赞数 8
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QZ9420/article/details/110673200
版权

父传子：靠自定义属性

方法一（接收数据）：
①在父组件中，在子组件的模板中定义一个自定义属性，值是父组件对象中data的值
②在子组件对象中通过props来接收数据，type：~~
③接收数据后即可使用
方法二（接收方法）：
①在父组件中，在子组件的模板中定义一个自定义属性
②在父组件中的methods中定义这个属性值
③在子组件对象的props中接收这个属性名
④在子组件中注册一个自带属性
⑤在子组件对象的methods中通过子的属性来触发来自父的属性

子传父：靠自定义事件

①@hello="f"(父组件中的son")；
②在父组件对象中methods调用方法 f(){}；
③son组件内部定义个自带属性触发；例如：<button :click="g">点击</button >；
④son组件对象method中执行g()函数来触发自定义事件hello；例如：g(){this.emit("hello",this.sondata)(并且可以带上数据)；
⑤father组件对象中：f(msg){}msg表示hello事件触发时人家给你传递的数据；
⑥定义数据：data(){return{datafromson：""}}为空；
⑦methods:{f(msg){this.datafromson=msg}}；
⑧小胡子即可调用；

组件之间的传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <Father></Father>
</div>

<!--Father组件的模板-->
<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>
        <Son></Son>
    </div>
</template>
<!--Son组件的模板-->
<template id="son">
    <div>
        <h3>Son组件---->{{ fatherData }}</h3>
    </div>
</template>
<script src="../js/vue-development.js"></script>
<script>
    // 定义Son组件
    let Son = {
        template:"#son",
    }

    // 定义Father组件
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

父传子：核心靠自定义属性。

步骤：

    1）在父组件模板中使用子组件的位的属性位置绑定父组件中的数据
        <Son :abc="fatherData"></Son>  这里面的冒号的作用

    2）在子组件对象中通过props接收数据
        let Son = {
            template:"#son",
            props:{
                /* abc表示子组件接收的数据 String表示子组件期待的数据是一个字符串，如果不是字符串，就会警告*/
                abc:String
            }
        }

    3）接收完数据，就可以使用之，在子组件模板中使用
        <template id="son">
            <div>
                <h3>Son组件==>{{ abc }}</h3>
            </div>
        </template>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <Father></Father>
</div>

<!--Father组件的模板-->
<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>

        <!--abc="fatherData"是自定义属性 属性名是abc  属性值是fatherData这个字符串-->
        <!--<Son abc="fatherData"></Son>-->

        <!--:abc="fatherData" 也是自定义属性节点 属性名是abc 属性值是fatherData这个数据-->
        <Son :abc="fatherData"></Son>
    </div>
</template>

<!--Son组件的模板-->
<template id="son">
    <div>
        <h3>Son组件---->{{ abc }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    // 定义Son组件
    let Son = {
        template:"#son",
        props:{
            /* abc表示子组件接收的数据 String表示子组件期待的数据是一个字符串，如果不是字符串，就会警告*/
            abc:String
        }
    }

    // 定义Father组件
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

props的几写法（父传子）：

    1） props:{
            title:String
        }
    2） props:{
            title:{
                type:String,  // 期待是一个String
                required:true, // 要求父必须传递传递
            }
        }

    3）props:{
        title:{
            type:String,
            // required:true, // 要求父必须传递传递
            default:"这是一个默认值"
        }
     }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>
        <!--<Son :title="fatherData"></Son>-->

        <!--没有传递数据-->
        <Son></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ title }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        /*props:{
            title:String
        }*/
        props:{
            title:{
                type:String,
                // required:true, // 要求父必须传递传递
                default:"这是一个默认值"
            }
        }
    }

    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

子传父：靠自定义事件

   自定义事件：
    <button click="alert(123)">登录</button>
        click="alert(123)"  html标签中天生的事件   DOM中的事件绑定
    <button @click="alert(123)">登录</button>
        @click="alert(123)"  html标签中天生的事件   vue中的事件绑定
    <button @abc="alert(123)">登录</button>
        @abc="alert(123)"  html标签中的自定义事件   vue中的事件绑定   事件名就是abc
    <Father @click="alert(123)"></Father>
        @click="alert(123)" 组件中自自定义事件 事件名是click
    <Father @abc="alert(123)"></Father>
        @abc="alert(123)" 组件中自自定义事件 事件名是abc

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>
        <!--<Son :title="fatherData"></Son>-->

        <!--没有传递数据-->
        <Son></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ title }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        /*props:{
            title:String
        }*/
        props:{
            title:{
                type:String,
                // required:true, // 要求父必须传递传递
                default:"这是一个默认值"
            }
        }
    }

    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

子传父：

$emit表示触发一个自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ dataFromSon }}</h3>
        <!-- @hello="f" 组件上面的自定义事件  事件名叫hello -->
        <!-- 当hello事件发生时，就调用f监听器 -->
        <!-- 现在是在father这个模板中，f监听器就需要写在Faher组件对象中 -->
        <!-- 给Son上面绑定了一个自定义事件，在son组件内部就可以触发自定义事件-->
        <!--如何触发hello事件，需要我们写代码来触发-->
        <Son @hello="f"></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ sonData }}</h3>
        <!--@click="g" vue中绑定天生的点击事件(需要鼠标去点击就会触发天生的点击事件)-->
        <button @click="g">点我</button>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        methods:{
            g(){
                // this表示Son组件对象
                // $emit表示触发一个自定义事件
                // this.$emit("hello");

                // 在使用$emit触发hello事件时，可以带上数据
                this.$emit("hello",this.sonData)
            }
        },
        data(){ return { sonData:"Son组件中的数据" } },
    }

    let Father = {
        template:"#father",
        data(){ return { dataFromSon:"" } },
        methods:{
            f(msg){ // msg是就是指当hello事件触发时，触发时人家给你传递的数据
                console.log(msg)
                this.dataFromSon = msg;
            }
        },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>
予倾
关注
  • 8
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件传值
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
vue父子组件传值的方法总结
ougexingfuba的博客
10-23 471
注意事项：父组件的数据发生了改变，子组件会自动跟着变子组件不能直接修改父组件传递过来的props，会报错， props是只读的子组件修改，不通知父级，会造成数据不一致PS：父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新总结:说明了从父到子的数据。
vue.js基础中父子组件之间的传值
g_xlike的博客
04-14 698
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：父子关系，兄弟关系，隔代关系（可能隔多代）。这里我们将父子关系的传值针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 父子组件间通信的几种方式，如 props、emiton、vuex、$parent / $children、以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。
第十九节:带你梳理Vue2: 父组件向子组件传参(props传参)
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-29 2180
本章主要用于介绍组件嵌套,以及嵌套形成的父组件向子组件传参.子组件如何通过pops 接收父组件数据, 以及接收数据处理详情
vue父组件和子组件数据传递
我的专栏
08-29 2万+
vue父组件和子组件数据传递
Vue组件通信：父组件向子组件传递数据 & Props详解
qq_53322872的博客
07-15 9970
本文讲述了父组件如何向子组件传递数据，并且详解介绍了props在vue中的用法。
父组件给子组件传值的两种方法
weixin_41883384的博客
11-06 8190
方法有两种， 方法一： props传值，这里注意一个问题，传过来的值需要用watch监听并赋值，否则这里获取到的是空数组 父组件： 1 <uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg> 1 .
vue实现组件之间传值功能示例
10-18
首先，我们来看一下如何通过`props`实现父组件向子组件的传值。在Vue中，父组件可以通过在子组件标签上设置属性来传递数据。这些属性名（即`props`）在子组件中被声明为可接收的属性，以便子组件能够访问这些值。...
JS父页面与子页面相互传值方法
10-26
需要注意的是，由于同源策略的限制，只有当父页面和子页面位于同一域下，才能直接通过JS进行通信。如果跨域，需要借助其他技术如CORS、JSONP或WebSocket等来实现数据传递。此外，出于安全考虑，现代浏览器可能限制...
vue 父件与子件传值
03-02
父组件与子组件直接的传值详解，详细的介绍了两者之间的关系，vue的一个难点
vue父组件向子组件(props)传递数据的方法
08-28
主要介绍了vue父组件向子组件(props)传递数据的方法,文中给大家补充介绍了vue父子组件间传值(props)的实现代码，需要的朋友可以参考下
vue子组件给父组件传值
01-08
在Vue.js框架中，通信是组件之间相互协作的基础。这里我们关注的是子组件如何向父组件传递数据，这个过程通常被称为“自定义事件”或“事件冒泡”。Vue.js提供了`$emit`方法来实现这一功能。让我们深入探讨一下这个...
微信小程序自定义组件传值 页面和组件相互传数据操作示例
10-17
本篇主要探讨如何在自定义组件中进行值传递，以及页面和组件之间的数据交互。 首先，创建自定义组件需要在组件的JSON配置文件中声明。例如，在`userInfo.json`文件中，我们定义一个名为"user-btn"的自定义组件： `...
父向子（传值）简单
m0_64707449的博客
06-15 1789
例子：第一步 创建两个 .vue文件。父: App.vue子：mySon.vue第二步 在（props）子组件中定义要使用的变量接收父组件传过来的数据第三步 在父组件中引入子组件 注册 使用第四步 定义数据 （这里的是死数据） 第五步 绑定变量...
vue父子组件传值：详解父组件向子组件传值（props）
热门推荐
qq_41968486的博客
10-27 7万+
vue父子组件传值：父组件向子组件传值（props） 定义父组件 2.定义子组件 关键点： 1.父组件想要向子组件传值，那么需要在子组件引入的地方绑定要传的值，并且要在父组件中引入子组件。 2.绑定的值可以是一个自定义属性来存放父组件向子组件传递的数据。 3.子组件使用props属性接收，然后可以直接在页面上以这个形式“{{}}”引用 1.父组件代码如下： <template> <div> 父组件: <input type="text" v-mode
父组件向子组件传对象
miya的博客
01-04 9747
1.通过对象的嵌套 在父组件中引入子组件，数据绑定为temp &lt;script&gt; export default{ data(){ temp:{ manager:{ name:"", age:"" } } ...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3963
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
组件和页面之间相互传值
05-24
在 React 中，可以通过 props 和 state 来实现组件和页面之间的相互传值。 1. Props：是一种从父组件向子组件传递数据的方式。在父组件中使用子组件时，可以通过给子组件添加属性（props）来传递数据。子组件可以在其内部使用 props 来访问这些数据。 2. State：是一种在组件内部存储数据的方式。可以通过 setState() 方法来更新组件的 state。当 state 发生改变时，组件会重新渲染，并且传递给子组件的 props 也会随之更新。 以下是一个简单的示例，展示了如何通过 props 和 state 实现组件和页面之间的相互传值： ``` // 父组件 import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> <ChildComponent count={count} /> </div> ); } // 子组件 import React from 'react'; function ChildComponent(props) { return <p>Count from parent component: {props.count}</p>; } ``` 在这个示例中，父组件维护了一个名为 count 的 state，同时将其作为 props 传递给子组件 ChildComponent。子组件通过 props 访问 count，并将其展示在页面上。当父组件中的 count 发生改变时，子组件也会随之更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值