Vue学习——组件、组件之间数据的传送

最新推荐文章于 2024-04-06 10:58:23 发布
最新推荐文章于 2024-04-06 10:58:23 发布
阅读量121 收藏
点赞数
分类专栏： Vue javascript 学习 文章标签： vue html javascript node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/116207419
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
Vue
86 篇文章 0 订阅
订阅专栏
学习
67 篇文章 0 订阅
订阅专栏

组件基础：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <hello></hello>
        <br>
        <hi></hi>
        <br>
        <str></str>
    </div>
    <div id="box">
        <hello></hello>
    </div>
    <script>
        // 定义组件
        Vue.component("hello", {
            // 模板：组件内容

            data() {
                return {
                    msg: "我是子组件"
                }
            },
            // 使用模板字符串(``)可以格式化语句
            // 模板字符串必须要标签括起来，内容写在同一个根元素里面
            template: `
            <div>
                hello!我是一个新来的<span>{{msg}}</span>
            </div>`
        });
        // 全局组件
        Vue.component("hi", {
            // Vue里面有的，这里面也可以有
            // 模板：组件内容
            // 使用模板字符串(``)可以格式化语句
            data() {
                return {
                    msg: 12306
                }
            },
            methods: {
                fn() {
                    console.log(12306);
                }
            },
            template: `
            <div>
                <p @click="fn">{{msg}}</p>
            </div>`
        })
        let vm = new Vue({
            el: "#app",
            // 局部组件
            components: {
                "str": {
                    template: "<div>我是局部组件</div>"
                }
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <hi></hi>
    </div>
    <script>

        Vue.component("hi", {
            data() {
                return {
                    sum: 10
                }
            },
            methods: {
                fn() {
                    this.sum--;
                }
            },
            template: `<div><button @click="fn">还有{{sum}}秒</button></div>`,
        })
        let vm = new Vue({
            el: "#app",
        })
    </script>
</body>

</html>

注意事项：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件注意事项</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">

        <h></h>
        <!-- 在普通标签就要用斜杠 -->
        <hello-world></hello-world>
    </div>
    <script>
        // 用驼峰法命名时
        Vue.component("helloWorld", {
            template: "<h1>中国欢迎你</h1>"
        });
        Vue.component("h", {
            // <HelloWorld></HelloWorld>在子组件可以照原样写也可以用斜杠法写
            template: "<div>你好啊，英雄<helloWorld></helloWorld><span>{{msg}}</span></div>",
            data() {
                return {
                    sum: 0
                }
            },
            methods: {
                fn() {

                }
            }
        })


        let vm = new Vue({

            el: "#app"
        })
    </script>
</body>

</html>

组件之间传值：

父组件传子组件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件传值——父向子</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- :msg的msg是属性，"msg"的msg是变量，这里的msg是父组件data中的msg -->
        <hello :msg="msg"></hello>
    </div>
    <script>
        // 子组件的内容，放在外面写
        var hello = {
            // template不能忘记
            // props是属性，这"msg"的msg是:msg的msg
            props: ["msg"],
            template: `<div>
            <h1>你好，中国,{{msg}}</h1>
            </div>`
        }
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "我是父组件的数据"
            },
            components: {
                // "hello": helloText,
                // 若组件名跟字符串模板名一样，可这样写
                hello
            }
        })
    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父传子</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <hello :title="ptitle" :msg="pmsg"></hello> -->
        <txt :title="ptitle" :msg="pmsg"></txt>
    </div>


    <script>
        // Vue.component("hello", {
        //     props: ["title", "msg"],
        //     data() {
        //         return {
        //             cmsg: "我是子组件的数据"
        //         }
        //     },
        //     template: `
        //     <div>
        //         {{cmsg+"-"+title+"-"+msg}}

        //     </div>`
        // })
        var txt = {
            props: ["title", "msg"],
            data() {
                return {
                    cmsg: "我是子组件的数据"
                }
            },
            template: `
            <div>
                {{cmsg+"-"+title+"-"+msg}}
                
            </div>`
        };
        let vm = new Vue({
            el: "#app",
            data: {
                pmsg: "我是父组件的数据",
                ptitle: "父组件"
            },
            components: {
                txt
            }
        })
    </script>

</body>

</html>

子组件传给父组件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子传父</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 这里的形参只能放$event -->
        <hello @send="send($event)"></hello>
    </div>
    <script>
        Vue.component("hello", {
            data() {
                return {
                    msg: "我是子组件的数据",
                    num: 2021
                }
            },
            // $emit('send',[msg,num])传的参可以是单个（msg），也可以是一个数组([msg,num])
            template: `
            <div>
            {{msg}}<button @click="$emit('send',[msg,num])">传送数据</button>
            </div>
            `
        })
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "我的是父组件的数据"
            },
            methods: {
                send(data) {
                    this.msg = data[0];
                    this.num = data[1];
                    console.log(this.msg);
                    console.log(this.num);

                }
            }
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子传父</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- @send是$emit()的第一个参数，sended()是父组件的方法（函数）,$event是固定不能改的，是传送的数据-->
        <hi @send="sended($event)"></hi>
        <p>{{msg}}</p>
        <p>{{num}}</p>

    </div>
    <script>
        Vue.component("hi", {
            data() {
                return {
                    cmsg: "我是子组件的数据",
                    cnum: 20
                }
            },
            // $emit('send',[cmsg,num])里面的第一个参数（send）是自定义事件的名称,第二个参数是传送的数据，可以是单个数据，也可以是多个数据，以数组[]的形式传送
            template: `
            <div>
                {{cmsg}}{{cnum}}
                <br>
                <button @click="$emit('send',[cmsg,cnum])">点我传送数据</button>
            </div>`
        })
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "",
                num: ""
            },
            methods: {
                // data传过来的是一个数组形式，所以使用下标来获取值
                sended(data) {
                    // console.log(data);
                    this.msg = data[0];
                    this.num = data[1]
                    console.log(this.msg);
                    console.log(this.num);
                }
            },

        })
    </script>
</body>

</html>

同级组件之间：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同级组件互传</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <hi></hi>
        <hello></hello>
    </div>
    <script>
        // 提供事件中心
        let hub = new Vue();
        // 传递方
        Vue.component("hi", {
            data() {
                return {
                    sendData: "我是传送的数据"
                }
            },
            template: `
            <div>
            <button @click="send">传送数据</button>
                </div>`,
            methods: {
                send() {
                    // 传送的事件：toHello
                    hub.$emit("toHello", this.sendData)
                }
            }
        });
        // 接收方
        Vue.component("hello", {
            data() {
                return {
                    msg: ""
                }
            },
            template: `<div>{{msg}}</div>`,
            // 自动执行（生命周期的已挂载阶段）钩子函数
            mounted() {
                console.log(123456);
                // 接收的事件：toHello
                hub.$on("toHello", (v) => {
                    // console.log("是hi传过来的数据" + v);
                    this.msg = v;
                })
            }
        });
        let vm = new Vue({
            el: "#app"
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟互传</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <send></send>
        <br>
        <get></get>

    </div>
    <script>
        // 兄弟组件之间的传送必须要有一个事件中心（hub）
        var hub = new Vue();
        // 传递方
        Vue.component("send", {
            data() {
                return {
                    smsg: "我是传送数据的",
                    sendMsg: "干饭啦干饭啦"
                }
            },
            template: `
            <div>
                {{smsg}}<br>
                <button @click="sendData">发送</button>
            </div>`,
            // 传送方的hub.$emit()是写在methods里面的
            methods: {
                sendData() {
                    // 传递数据方方法里要有这个才行hub.$emit()
                    // hub.$emit()的第一个参数是传送的事件名称，第二个参数是传送的数据
                    hub.$emit("send-data", this.sendMsg);
                }
            }
        })
        // 接收方
        Vue.component("get", {
            data() {
                return {
                    gmsg: "我是接收数据的",
                    getMsg: ""
                }
            },
            // mounted(钩子函数)是Vue生命周期中的已挂载阶段，是自动执行的
            // 接收方的hub.$emit()是写在mounted() {}里面的
            mounted() {
                // hub.$on()的第一个参数是传送的事件名称，与传送方的事件名一致，第二个参数是个方法
                // data是传送过来的数据
                hub.$on("send-data", (data) => {
                    // console.log(data);
                    this.getMsg = data;
                })
            },
            template: `<div>{{gmsg}}<br>接收到的数据为：{{getMsg}}</div>`,

        })



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

</html>
h_jQuery
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - Teleport 传送门（详细教程）
王佳斌
11-13 2463
Vue3 teleport 传送门官方文档，vue3 Teleport 传送门，vue3之teleport(传送门)的使用，极速上手 VUE 3 teleport传送门组件及使用语法，VUE 3 teleport传送门，Vue 3 任意传送门，vue3中teleport传送门与emits事件的使用，VUE3 teleport传送门用于做什么，详解Vue3中Teleport的使用，Vue3 - Teleport 传送门（详细教程）。
【VUE】VUE组件间数据传递的总结与思考
不忘初心，坚定道路！
10-29 342
背景 vue组件数据通信是比较重要的，理清楚方法后基本使用起来没啥问题了。 由于方法特别多，所以需要好好整理一下，再合适的场景采取合适的方法才是最重要的。 准备工作 迅速测试父子组件就弄个App.vue和child.vue App.vue <template> <div> <mychild></mychild> ...
使用vue-router在页面之间传值及接收值
weixin_34248487的博客
10-24 831
第一页 点击去第二页的时候进行传值直接贴代码看： <template> <div id="app"> <div><router-link to="/">首页</router-link></div> <div><a href="javascript:void(0)" @click...
vue基础学习笔记 --- 组件间数据的传输方式（7种，vue2环境下）
MImi_0612的博客
08-07 1228
vue组件间传值的7中方法：props、自定义事件、$bus、pubsub-js、vuex、插槽slot、provide和inject跨组件传值
Vue组件间通信
weixin_47074432的博客
09-18 2469
Vue组件间传值 一、父组件调用子组件的数据和方法 1、$children 通过this.$children.search()访问子组件中定义的属性或方法 2、ref // 父组件通过ref给子组件做一个标记 <outSide ref="test"> </outSide > 通过this.$refs.test.search()访问子组件的属性或方法 3、$emit // 子组件 this.$emit("test",data) //data是需要传递的数据 // 父组件
vue组件之间的数据传递
weixin_33755554的博客
03-25 275
最近在整理项目中代码，在组件之间数据传递遇到了问题，所以做了这次总结，如有不对的地方，望指正。 父组件如何将数据传到子组件中 父组件可以通过Prop传递数据到子组件中。 这里需要注意的是： Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。 每次父组件更新时，子组件的所有 Prop 都会...
Vue3——Teleport传送组件
weixin_42789698的博客
09-05 10
【代码】Vue3——Teleport传送组件。
vue系列 —— vue-route详细使用方法
热门推荐
七月
11-30 3万+
说到路由， 我们最熟悉的路由是什么呢？ 那就是路由器了。 其实路由器有两个重要的功能： 路由和传送 路由： 路由决定数据包从哪里来， 到哪里去。 也有是来源和目的地的路径。 路由中有一个路由表，路由表本质上就是一个映射表，决定了数据包的传输方向。 传送： 传送是将输入端的数据传送给输出端 下面我们先来搭建一个项目, 然后一边学习一遍在项目里实战 创建vue-cli2项目 vue init webpacek vueroute 然后一路向下就可以了, 如果本地创建项目很慢, 可以采用离线创建项目的
极速上手 VUE 3——teleport传送门组件，前端开发大全
最新发布
2401_84092423的博客
04-06 661
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
极速上手 VUE 3——teleport传送门组件(1)，web开发技术
2401_84092398的博客
04-06 546
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，
【Vue3 第二十一章】Teleport组件传送
前端知识分享喵
02-27 1094
Teleport组件传送
vue组件之间的数据传递合集
weixin_47450807的博客
03-20 1765
一、写在前面 今天总结一道前端面试题，关于两个组件之间的进行数据通信的方式。 二、父子组件通信 2.1、props方式和emit 第一种方法是子组件通过props属性来接收父组件的数据，然后父组件在子组件上注册监听事件，子组件通过emit来触发事件向父组件发送数据。 2.2、ref方式和$root,$parent 第二种方式是通过ref属性给子组件设置一个名字。父组件通过refs组件来获取自组件，子组件通过‘refs组件来获取自组件，子组件通过`refs组件来获取自组件，子组件通过‘parents获取父组件
Vue中如何给组件传递数据；利用props给Vue组件传递数据的三种方法；如何修改传递给Vue组件的数据的值
ChuanyangChen的博客
01-26 2041
前言 本文讲解两个Vue的知识点： 给Vue组件传递数据的3种办法 如何修改传递给Vue组件数据的值 给Vue组件传递数据的3种办法 在组件中利用数组简单声明接收（常用） 在组件中利用对象接收数据（2种比较高级的办法） 1. 在组件中利用数组简单声明接收 在组件中，通过props:['name','age','gender']的方式接收需要从外部传递进来的字段 在App.vue 中的写法（传递数据给组件）： 2.利用对象的方式限制传递的数据类型 ⚠️ 下面展示传递错误的数据类型 ❌ 橙色方
Vue组件之间简单的数据传递
所行皆坦途
08-12 735
Vue组件之间简单的数据传递、props、bus、$emit()，简单的实现 Vue 组件之间的传值
日期时间选择器——el-date-picker设置默认时间
h_jQuery的博客
08-03 1万+
组件使用
vscode用Git上传项目到远程仓库（gitee）
h_jQuery的博客
07-06 1万+
git上传 在vscode的源代码管理那里操作 1.添加仓库：点击右上角的三点(…)—>选择远程—>选择添加远程存储库—>在弹出框那里输入远程的仓库地址（gitee或者是github） 这里填的是仓库名 2.将工作区的文件添加到暂存区（暂存更改）：点击更改字样右侧的**+**号 3.将暂存区的文件提交到本地仓库： 点击源代码管理字样右侧的√ 输入提交的备注信息（比如完成某某功能，或者完成了某某页面），然后就回车 完成了第三步，此时的页面 说明文件都提交了，提交到了本地仓库
文件上传——将文件转成base64传给后端
h_jQuery的博客
10-25 4253
文件上传转base64
vue组件封装——公用基础table组件
h_jQuery的博客
12-05 3630
vue公用基础表格组件封装案例
Vue组件间通信实战：深度解析数据流转策略
1. 父组件传递数据给子组件 —— Props Props是Vue中用于父组件向子组件传递数据的主要手段。在创建子组件时，父组件可以通过定义props属性来指定子组件可以接收的属性。这些属性值由父组件传递，供子组件使用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值