vue 组件父子孙 三代传递 以及 子传父 孙传父

最新推荐文章于 2024-06-03 22:04:47 发布
最新推荐文章于 2024-06-03 22:04:47 发布
阅读量5.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panhuanqin/article/details/83753394
版权

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子孙相互通信</title>
    <style>
        td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<body>
<section id="app">
    <table border="1" cellspacing="0" width="600px">
        <tr>
            <th colspan="3">父亲的数据</th>
        </tr>
        <tr>
            <td>name</td>
            <td>{{name}}</td>
            <td><input type="text" v-model="name"></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{age}}</td>
            <td><input type="text" v-model="age"></td>
        </tr>
    </table>
    <v-Child :fn="name" :fa="age" @childbyvalue="childByValue"></v-Child>
</section>


<template id="child">
    <div>
        <button @click="change">子传父</button>
        <table border="1" cellspacing="0" width="600px">
            <tr>
                <th colspan="3">儿子的数据</th>
            </tr>
            <tr>
                <td>Myname</td>
                <td>{{cn}}</td>
                <td><input type="text" v-model="cn"></td>
            </tr>
            <tr>
                <td>Myage</td>
                <td>{{ca}}</td>
                <td><input type="text" v-model="ca"></td>
            </tr>
        </table>
        <v-son :sn="cn" :sa="ca"></v-son>
    </div>
</template>

<template id="son">
    <div>
        <button @click="sonchange">孙子传父</button>
        <table border="1" cellspacing="0" width="600px">
            <tr>
                <th colspan="3">孙子的数据</th>
            </tr>
            <tr>
                <td>Myname</td>
                <td>{{wn}}</td>
                <td><input type="text" v-model="wn"></td>
            </tr>
            <tr>
                <td>Myage</td>
                <td>{{wa}}</td>
                <td><input type="text" v-model="wa"></td>
            </tr>
        </table>
    </div>
</template>
</body>
<script>
    let app1=new Vue({})                   //  过度
    let app = new Vue({
        // el: "#app",
        data: {
            name: "father",
            age: 20
        },
        methods: {
            childByValue(childValue) {
                this.name = childValue.cname
                this.age = childValue.cage
            },
        },
        mounted(){
            let that=this
            app1.$on("sonbyvalue",function (val) {           //获取页面中数据  绑定
                that.name=val.cname
                that.age=val.cage
            })
        },
        components: {
            "vChild": {
                props: ["fn", "fa"],               //接收数据
                template: "#child",
                data: function () {             //每接收一个，返回一次，时时更新
                    return {
                        cn: this.fn,
                        ca: this.fa
                    }
                },
                watch: {                          //监听 数据改变
                    fn: function () {
                        this.cn = this.fn;
                    },
                    fa: function () {
                        this.ca = this.fa;
                    }
                },
                methods: {
                    change() {
                        let obj = {                        //数据写入对象
                            cname: this.cn,
                            cage: this.ca
                        }
                        this.$emit("childbyvalue", obj)      //触发    发送数据
                    }
                },
                components: {
                    "vSon": {
                        props: ["sn", "sa"],                    //接收数据
                        template: "#son",
                        methods:{
                            sonchange(){
                                let obj1={                              //数据写入对象
                                    cname: this.wn,
                                    cage:this.wa
                                }
                                app1.$emit("sonbyvalue",obj1)       //触发    发送数据
                            }
                        },
                        data: function () {                 //时时更新接收数据
                            return {
                                wn: this.sn,
                                wa: this.sa
                            }
                        },
                        watch: {                             //监听 数据改变
                            sn: function () {
                                this.wn = this.sn;
                            },
                            sa: function () {
                                this.wa = this.sa;
                            }
                        }
                    }
                }
            }
        }
    }).$mount('#app')
</script>
</html>
笔临
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
01-18
Nuxt嵌套路由官网上的API详解：点击链接 看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在<nuxt>区域显示一个页面内容怎么办？ 自己案例代码： pages/parent.vue <template> <div> <h2>父组件的页面的内容</h2> <ul> <!-- 进行切换子页面，写法同vue.js --> <li><nuxt to='/parent/child'>child</nuxt></li> <li><nuxt to='/parent/child2'>child2</nux
Vue祖孙传值
zole1314的博客
11-26 3099
基础 祖孙组件，也就是 3 层嵌套的组件。关于 vue 中父子组件之间的数据传递是通过 props 和 $emit 实现，参考Vue 父子组件传值。 那祖孙组件之间传值怎么实现，先了解下面的几个 vue 属性。 $props 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。 $attrs $attrs 是一个 Object，它包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除
vue3_组件间通信方式
最新发布
分享程序相关知识
06-03 1044
vue3组件通信。
vue3.0组件之父传子，子传父,父传孙
梨子社区
07-28 1310
vue3.0父传子，子传父,父传孙
vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值
qq_16495187的博客
06-15 2566
1.父组件 <template> <div class="Parent" ref="Parent"> <el-button @click="Responsive">父组件执行方法</el-button> <Subcomponents></Subcomponents> </div> </template> <script lang="ts"> import { defineCo
vue中父传子，父传孙说明
lixu_boke的博客
03-28 2109
先来说一下，vue中父传往子组件用v-bind绑定属性，在子页面用props接收，子传往父的用$emit this.$emit('change',data)，data就是你要传的数据，change为父页面中绑定的事件 说一下父传孙的，在vue2中可以使用v-bind="$attrs" 这个咱们统一上代码说： 当然还有别的方法 在vue版本为2.2.0以上的也可以使用provide与inject 还能使用eventBus来传参接参 当然大部分时候会使用vue...
vue父组件异步获取数据传给子组件的方法
10-18
在Vue框架中，父组件与子组件之间的数据传递是一个常见的需求。当父组件的数据是通过异步请求获取时，如何正确地将这些数据传递给子组件，并确保子组件能够及时、安全地使用这些数据，是开发者需要面对的问题。本文...
vue里面父组件修改子组件样式的方法
08-28
Vue 中父组件修改子组件样式的方法 在 Vue 开发中，经常会遇到父组件修改子组件样式的问题。由于 scoped 属性的存在，父组件的样式无法渗透到子组件中。那么，如何让父组件修改子组件的样式呢？下面将分享三种方法...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
vue中如何让子组件修改父组件数据
08-27
在 Vue 中，子组件修改父组件属性是指子组件将数据传递给父组件的过程。在 Vue 2.0+ 后，不再是双向绑定，如果要进行双向绑定需要特殊处理。 1. 通过事件发送给父组件来修改 在子组件中，我们可以使用 $emit 方法...
VUE父组件、子组件互相传值
weixin_45928161的博客
05-12 1185
介绍了父传子、子传父
Vue v2.4中新增的$attrs及$listeners属性使用
wk964269669的博客
08-29 889
原文地址：https://www.jb51.net/article/132371.htm 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的.
vue 孙组件向父组件传值$listeners
weixin_45936275的博客
08-30 641
vue中孙组件向父组件传递 1.一层层传递 （不推荐，一层层传递太麻烦） 2. 使用vuex （如果只是单纯的传递，也不是很推荐使用） 3. 使用bus事件总线（但是vue3中已删除vue的事件总线） 4.使用 $listeners `v-on="$listeners"` // 在各级组件上添加即可 ...
Vue祖孙组件传值
peter_hzq的博客
11-08 7011
祖传孙 方法一：props 传递次序：GrandFather → Father → GrandSon 1、在 GrandFather 中给 Father 传递了一条消息。 GrandFather.vue <template> <div class="parent"> ????爷爷 <Father :msg1="msg1" :msg2="msg2" /> </div> </template> <script> i
vue组件之间的数据传递--父传子
weixin_43478869的博客
01-25 262
对父组件中的数据传递到子组件的方法：子组件用props 下面说具体写法 父组件（Hello.vue）：里面写了动态数据和实时数据的更新方法  &lt;template&gt; &lt;div&gt; 父亲: &lt;!-- 实时更新数据 --&gt; &lt;input type="text" v-model="ifemsg"&gt;...
vuejs --- 子组件向父组件传值（子传父）
热门推荐
Be myself
05-23 2万+
子传父：顾名思义子组件向父组件传值，它属于事件传值 。 我们来边看代码边注释： 先看一下，子组件 -》 注释：如图中所示，我们点击button这个按钮，触发了buttonDianji()这个事件，this.$emit() 该机制会向父组件传一个事件helloButton，其内容为逗号之后。并且去父组件-》找这个事件。 下面，看一下父组件： 到此，子传父，就完成了。：） ...
Vue祖孙组件怎么传值(1)，118页Vue面试题总结
2401_84138968的博客
04-16 530
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
嵌套路由nuxt-child组件（父子页面组件的传值）
阿蔡的博客
06-21 5201
链接： nuxt文档 相关文章 1.创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。 这里在pages里新建一个fanil.vue、fanil文件夹 2.fanil.vue源码 <template> <div class="container"> <p>Final Page</p> ...
vue父组件异步值传递给子组件
09-07
在Vue中，可以通过props来将父组件的异步值传递给子组件。下面是一个简单的示例： 父组件： ```vue 获取数据 import ChildComponent from './ChildComponent.vue'; export default { components: { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值