vue2.0的三种常用传值方式，并且如何实现？

最新推荐文章于 2024-05-06 17:41:29 发布
最新推荐文章于 2024-05-06 17:41:29 发布
阅读量3.7k 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40774113/article/details/81391524
版权

三种传值方式：父传子 子传父 非父子

  1. 父传子
  2. 子传父
  3. 非父子

这里写图片描述

父组件向子组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子向父亲进行传值</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <father></father>
        </div>
    </body>
    <script type="text/javascript">

//      子组件如何向父组件里面进行传值
//      1.首先创建两个组件一个是子组件一个是父组件
//      2.在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送
//      3.在父组件里面使用v-on绑定的自定义事件 事件触发 并且执行事件处理函数  通过函数的参数来接受传递过来的数据


        Vue.component('father',{
            template:`
            <ul>
                <li v-for="temp in list">{{temp}}</li>
                <son @clic="get"></son>
            </ul>
            `,
            data(){
                return{list:[]}
            },
            methods:{
                get:function(msg){
                    this.list.push(msg)
                }
            }
        })
        Vue.component('son',{
            template:`
            <div>
            <input  type="text" v-model="inputval" />
            <button @click="clik">父亲向子传数据</button>
            </div>
            `,
            data(){
                return{
                    inputval:''
                }
            },
            methods:{
                clik(){
                    this.$emit('clic',this.inputval)
                    this.inputval=""
                }
            }
        })
        var app=new Vue({
            el:"#app"
        })
    </script>
</html>
<!--自定义事件    -->

效果图演示效果

这里写图片描述

子组件传父组件传值

在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送

非父子之间的传值

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>非父子组件之间的传值</title>
        <script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script type="text/babel">
        class Child1 extends React.Component{
        constructor(){
            super()
         }
            render(){
                return   (
                    <div><ul><li>child1</li></ul></div>
                )
            }
            componentWillMount(){
                window.localStorage.setItem('site','haomahaode')
            }
        }

        class Child2 extends React.Component{

         constructor(){
            super()
         }

            render(){
                return   (
                    <div><ul><li>child2</li></ul></div>
                )
            }
            componentWillMount(){
                console.log(window.localStorage.getItem('site'))
            }
        }
        ReactDOM.render(
            <div><Child1></Child1>
            <Child2></Child2></div>
            ,
            document.getElementById("app")
        )
    </script>
</html>
爱AJ的范思哲
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue学习 三种常用传值方式 $emit的用法 slot与slot-scope
04-02
vue学习 三种常用传值方式 $emit的用法 slot与slot-scope
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue2.0 传值方式
01-02 262
Vue2.0 传值方式： 在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介...
Vue传值方式
aeipyuan
07-05 107
1. provide和inject实现祖先逐渐与后代组件传值 /* 祖先组件 */ export default { //... methods: { test(val) { console.log("test: ", val); } }, provide() { return { test: this.test } } } /* 后代组件 */ export default { //... inject: ['test'], create
2024年前端最全vue组件传参教程！超简单_nginx调用vue时传参，详细讲解
最新发布
2301_82243603的博客
05-06 178
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
vue中的传值
qq_59076775的博客
08-04 303
Vue中的组件传值
vue的三种常用传值方式
weixin_44687753的博客
07-23 5743
一、父组件向子组件传值 1.使用props建立数据通道的渠道 // 这是父组件 // 这是子组件 2 . 在子组件中通过props传递过来的数据 Vue,component(‘child’,{ props:[‘message’] }) 二、子组件向父组件传值 在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送 三、非父子组件传值 利用一个公共的vue来进行传递值和获取值 （是用过一个公共bus这个bus可以是一个dom元素也可以是localStora
vue父子组件中传值
WI_232995的博客
12-04 265
hellword.vue 子组件comment.vue
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
Vue三种常用传值示例(父传子、子传父、非父子)
10-18
本文将详细介绍三种常见的Vue组件传值方式：父组件向子组件传值、子组件向父组件传值以及非父子组件之间的传值。 1. **父组件向子组件传值** 在Vue中，父组件向子组件传递数据通常通过`props`属性实现。首先，在父...
vue.js前后端数据交互之提交数据操作详解
10-18
主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下
详解vuejs几种不同组件（页面）间传值的方式
12-12
在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA中的组件间传值。 一、路由传值 路由对象如下图所示： 在跳转页面的时候，在js代码中的操作如下，在标签中使用标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。 这样使用
Vue中两种传值方式
weixin_30363509的博客
06-05 274
第一种：通过url传参，直接在地址后加? ，通过this.$route.query对象获取 第二种：通过路由传参，修改路由，通过this.$route.params对象获取 转载于:https://www.cnblogs.com/zlwei23/p/10981192.html...
vue传递参数
DaiDaiiii的博客
12-12 716
一、路由之间的传递 quation.vue      &lt;router-link class="li" :to="{path:'/newsDetail/'+items.id,query: {name: '资讯'}}" &gt;&lt;/router-link&gt; newsDetail.vue      mounted: function(){              this....
vue 传值的几种方式
my_roads的博客
10-03 4987
1.父子传值 第一步： 在父元素中绑定一个参数 我这里的是： :id="updateId" 第二步： 在子元素中接受，使用props接收。 2.子向父传值 第一步： 在子组件中触发 我这里并没有传值，如果需要传值，就：self.$emit('updates', '你要传的值'). 第二步： 在父元素监听事件 传参的直接在updates (参数)
Vue通信、传值的几种方式
morpheusl的博客
04-18 230
一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B②在B组件中获取A组件传递过来的参数this.$route.query.orderId二、通过设置 Session ...
【vue】vue路由传参的三种方式
热门推荐
hello world_
10-22 8万+
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 方式一：params 传参（显示参数） params 传参（显示参数）又可分为 声明式 和 编程式 两种方式 1、声明式 router-link 该...
vue 解决请求接口时候需要body以及query同时传参的问题
weixin_46760480的博客
12-26 7330
首先 接口需要我们传参的格式是这样的 分为两部分 请求参数以及body参数
vue2.0 父子组件传值
05-01
Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现。 1. 属性(prop)传递值 父组件通过在子组件上定义prop属性，指定要传递的值类型和名字，然后将值传递给子组件的prop属性。子组件通过props接收...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值