vue 组件之间的传值

最新推荐文章于 2023-11-07 15:43:40 发布
最新推荐文章于 2023-11-07 15:43:40 发布
阅读量261 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43675447/article/details/88790958
版权
  1. 父组件给子组件传值

  • 在父组件中的子组件上绑定属性，在子组件里面接受传值（props）

  • 传值、传对象、传方法

  • 可在接受传值的时候，规定传值的类型

例1：父组件为APP.vue,子组件为Home.vue
App.vue：

<template>
  <div id="app">
   <div class="par_b">
      <p>{{msg}}</p>
      <v-home :title="toHome" :tobool="ishow" :tofun="getchild"></v-home>
   </div>
  </div>
</template>

<script>
import Home from './Components/Home.vue';
export default {
  name: 'app',
  components:{
    'v-home':Home
  },
  data () {
    return {
      msg:"我是根组件",
      toHome:"测试父组件和子组件的传值",   //传值
      ishow:true   
    }
  },
  methods:{
    //传方法
    getchild(){
      console.log(1);
    }
  }
}
</script>

Home.vue：

<template>
    <div id="home">
        <p>{{msg}}</p>
        <p>{{title}}</p>
        <p>{{tobool}}</p>
    </div>
</template>

<script>
export default {
    name:'home',
    props:{
        //对于传来的值进行校验
        'title':String,  
        'tobool':Boolean,
        'tofun':Function
    },
    //基本方式
    //props:['title','tobool','tofun'],
    mounted(){
        this.tofun();
    },
    data(){
        return{
            msg:"我是home组件"
        }
    }
}
</script>

总结：子组件可以通过props属性获取父组件传递的值和方法

  1. 子组件给父组件传值

问题一：

Q：父组件如何使用子组件里的属性和方法？
A：使用ref（ref获取虚拟dom元素节点，可在父组件里获取子组件里的整个对象，利用“对象.属性”和“对象.方法”进行使用）。因此在父组件中的子组件上定义ref属性，通过 this.$ refs.name.属性或this.$refs.name.方法

例2：在例1基础上

App.vue：

<template>
  <div id="app">
   <div class="par_b">
      <p>{{msg}}</p>
      <v-home ref="homedata" :title="toHome" :tobool="ishow" :tofun="getchild"></v-home> 
      <button @click="getchildMsg">获取home组件的属性和方法</button>
   </div>
  </div>
</template>

<script>
import Home from './Components/Home.vue';
export default {
  name: 'app',
  components:{
    'v-home':Home,
  },
  data () {
    return {
      msg:"我是根组件",
      toHome:"测试父组件和子组件的传值",
      ishow:true
    }
  },
  methods:{
    getchild(){
      console.log(1);
    },
    getchildMsg(){
      //通过虚拟dom节点获取整个子组件对象
      let homelist=this.$refs.homedata;
      console.log(homelist);
    }
  }
}
</script>

问题二：

Q：子组件如何获取父组件的整个对象（子组件主动获取父组件的属性和方法）？
A：法一：在父组件中的子组件上定义:parent=“this” ，在子组件中通过props获取parent（类似于父组件给子组件传值，子组件通过props获取父组件传的值）

法二：子组件里直接获取父组件
使用this.$ parent.数据和this.$parent.方法

例3（法一）：在例2基础上

App.vue：

<template>
  <div id="app">
   <div class="par_b">
      <p>{{msg}}</p>
      <v-home ref="homedata" :parent="this" :title="toHome" :tobool="ishow" :tofun="getchild"></v-home> 
      <button @click="getchildMsg">获取home组件的属性和方法</button>
   </div>
  </div>
</template>

<script>
import Home from './Components/Home.vue';
export default {
  name: 'app',
  components:{
    'v-home':Home
  },
  data () {
    return {
      msg:"我是根组件",
      toHome:"测试父组件和子组件的传值",
      ishow:true
    }
  },
  methods:{
    getchild(){
      console.log(1);
    },
    getchildMsg(){
      //通过虚拟dom节点获取整个子组件对象
      let homelist=this.$refs.homedata;
      console.log(homelist);
    }
  }
}
</script>

Home.vue：

<template>
    <div id="home">
        <p>{{msg}}</p>
        <p>{{title}}</p>
        <p>{{tobool}}</p>
    </div>
</template>
<script>
export default {
    name:'home',
    props:['title','tobool','tofun','parent'],
    mounted(){
        this.tofun();
        console.log(this.parent.ishow);
    }, 
    data(){
        return{
            msg:"我是home组件"
        }
    }
}
</script>

例4（法二）：在例2基础上

Home.vue：

<template>
    <div id="home">
        <p>{{msg}}</p>
        <p>{{title}}</p>
        <p>{{tobool}}</p>
    </div>
</template>
<script>
export default {
    name:'home',
    props:['title','tobool','tofun'],
    mounted(){
        this.tofun();
        console.log(this.$parent);
    }, 
    data(){
        return{
            msg:"我是home组件"
        }
    }
}
</script>
<style lang="scss">

</style>
  1. 非父组件之间传值

不建议使用子父间的传值，使用vue里面的全局广播，即事件的监听

例5：List.vue给Home.vue传值

  • 建立一个与Home.vue同级的组件，名为List.vue ；

  • 要做广播，需建一个全局文件（在src里新建一个名为Emit的文件夹，在该文件夹里新建一个名为Emit.js的文件）；

  • 在Emit.js里实例化vue对象；

  • 将对象进行暴露。

整个vue环境里就一个new vue，这个new vue就是进行全局广播

Emit.js：

//实例化vue对象
//导入vue 
import Vue from 'vue';
let emit=new Vue();
//将emit暴露出去
export default emit;
  • 在哪里广播，在其上导入vue的全局对象；
import Emit from '../Emit/Emit.js'

注：广播和接收广播都需导入

  • 在List.vue中触发广播；

List.vue：

<template>
    <div id="list">
        <p>{{msg}}</p>
        <!-- 
            List组件给Home组件传值  广播  （非父之间传值，这里的非父指两组件为同级关系）
         -->
         <button @click="sendhome">给home组件传值</button>
    </div>
</template>
<script>
//导入vue的全局对象
import Emit from '../Emit/Emit.js';
export default {
    name:'list',
    data(){
        return{
            msg:"我是list组件",
            tohome:"接受list广播"
        }
    },
    methods:{
        sendhome(){
            //触发广播  tohomedata相当于事件，一种类型
            Emit.$emit("tohomedata",this.tohome);
        }
    }
}
</script>
  • 接收非父组件之间的广播传值

Home.vue：

<template>
    <div id="home">
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Emit from '../Emit/Emit.js';
export default {
    name:'home',
    mounted(){
        //接收非父组件之间的广播传值  监听tohomedata
        Emit.$on("tohomedata",(res)=>{
            console.log(res);
        });
    }, 
    data(){
        return{
            msg:"我是home组件"
        }
    }
}
</script>
  • 传来的值需打印上去进行绑定

Home.vue：

<template>
    <div id="home">
        <p>{{msg}}</p>
        <p>{{listdata}}</p>
    </div>
</template>
<script>
import Emit from '../Emit/Emit.js';
export default {
    name:'home',
    mounted(){
        //接收非父组件之间的广播传值  监听tohomedata
        Emit.$on("tohomedata",(res)=>{
            this.listdata=res;
        });
    }, 
    data(){
        return{
            msg:"我是home组件",
            listdata:null
        }
    }
}
</script>

例6（在例5的基础上）：Home.vue给List.vue传值

  • 在Home.vue中触发广播

Home.vue：

<template>
    <div id="home">
        <p>{{msg}}</p>
        <p>{{listdata}}</p>
        <button @click="sendtolist">给list组件广播</button>
    </div>
</template>
<script>
import Emit from '../Emit/Emit.js';
export default {
    name:'home',
    mounted(){
        //接收非父组件之间的广播传值  监听tohomedata
        Emit.$on("tohomedata",(res)=>{
            this.listdata=res;
        });
    }, 
    data(){
        return{
            msg:"我是home组件",
            tolist:"接受home广播",
            listdata:null
        }
    },
    methods:{
        sendtolist(){
            //触发广播
            Emit.$emit("tolistdata",this.tolist);
        }
    }
}
</script>
  • 接收非父组件之间的广播传值

List.vue：

<template>
    <div id="list">
        <p>{{msg}}</p>
        <p>{{giveme}}</p>
         <button @click="sendhome">给home组件传值</button>
    </div>
</template>
<script>
import Emit from '../Emit/Emit.js';
export default {
    name:'list',
    data(){
        return{
            msg:"我是list组件",
            tohome:"接受list广播",
            giveme:null
        }
    },
    mounted(){
        Emit.$on("tolistdata",(res)=>{
            this.giveme=res;
        });
    },
    methods:{
        sendhome(){
            //触发广播  tohomedata相当于事件，一种类型
            Emit.$emit("tohomedata",this.tohome);
        }
    }
}
</script>
易安sparkle
关注
专栏目录
html中js向vue组件传值,Vue 组件之间传值
weixin_26850469的博客
06-18 1113
#同一个路由下，父向子组件传值props属性 -- 单向绑定import childOne from '../components/childOne.vue';export default{data() {return{msg: '我是动态data中的数据！'}},components: {childOne}} {{ info }} {{ msg }} export default{props:...
App.vue与home.vue的区别
weixin_40945354的博客
01-06 1562
App.vue还包括底部导航。NavBar 本身包括上面图渲染的内容。router-view Home只包括明细里的内容
Vue的传值方式
温室的侠客的博客
09-24 1599
/ 子组件{{title}}//绑定点击事件data() {return {title:"子传父"}},this.$emit("titleChanged","子向父组件传值");//自定义事件}}}// 父组件//与子组件Change自定义事件保持一致// update($event)接受传递过来的文字data(){return{
(最详细)VueApp项目实战 - - 项目环境搭建
yuan
12-17 3250
一、项目环境准备 1.Node.js a. 官网下载安装包：Node.js中文官网 b. 安装检测：Windows系统打开cmd命令行, Mac系统打开终端 node -v # 输入后回车 v14.15.1 # 出现版本号, 则表示'Node.js'安装成功 npm -v # 输入后回车(检测'Node.js'的包管理工具是否自动安装) 6.14.8 # 出现版本号, 说明安装成功 2.Vue脚手架( Vue-CLI ) a. 查看Vue官方文档：Vue-CLI脚手架 强调!!! 此项目运用的是Vu
【Vue】路由组件向app.vue主文件传值
最新发布
y_coder的博客
11-07 233
在路由定义中，你可以使用路由参数来传递数据。首先，你需要在路由配置中定义路由参数，然后在组件中使用。你还可以使用路由状态来传递数据，这种方法适用于需要在多个组件之间共享数据的情况。主页面传递数据的两种常见方法。你可以根据你的需求选择其中一种来实现数据传递。首先，在路由配置中，你可以为每个路由添加一个。在Vue.js中，可以使用路由传参的方式向。这样，你可以在多个组件中访问相同的数据。在这个例子中，我们定义了一个路由参数。然后，在你的组件中，你可以通过。然后，在组件中，你可以通过。对象来访问这些参数。
vue组件通信
qq_52963857的博客
06-16 776
1.1 vue组件通信1.2 父向子-props1.3 父向子-配合循环1.4 单向数据流1.5 子向父1.6 阶段小结1.7 父组件访问子组件$ref1.8 子组件访问父组件内容：1.9 Vue组件：提供 provide / 注入 inject1.10 处理响应性，加练习1.选中求和
深入理解Vue 组件之间传值
10-18
本文将深入探讨Vue组件间的数据传递，包括父组件向子组件传递数据、子组件向父组件传递数据以及子组件之间的间接通信。 一、父组件向子组件传递数据 Vue中，最常用的数据传递方式是通过props（属性）。在子组件中...
Vue 组件间传值及事件触发Demo
09-07
总结：Vue组件间传值和事件触发是构建可复用、可维护应用的基础。通过`props`、`v-model`、`$emit`、`Vuex`等手段，我们可以有效地管理组件间的数据流动，同时通过自定义事件和事件回调实现组件间的交互。理解并熟练...
解决vue组件props传值对象获取不到的问题
10-16
首先，我们来看Vue组件中props的基本使用方法。在父组件中定义一个props，然后将数据通过属性的方式传递给子组件。例如，在父组件`home.vue`中，我们定义了一个名为`personal`的prop，并将其传递给子组件`form-...
vue项目中某一页面不想引用公共组件app.vue解决办法
彳亍的博客
04-15 1万+
Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%...
建立Home页面的路由，App.vue页面的变化，去与留
weixin_40945354的博客
06-23 332
原来，以及我的猜想 <template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Hello Vue 3 + Vite" /> <router-view></router-view> </template> <script setup> //import HelloWorld from './components/Hello
vue基础：在跟组件（App.vue）调用外部组件
谷咕咕
01-21 1万+
vue基础：在跟组件（App.vue）调用外部组件 在vue学习中，我们发现将所有的组件，都放在根组件是不合理的，同样也是低效的。于是我们将不同的模块分割，需要哪个模块的时候就可以直接调用。这类似于html5中模板的性质。 1.首先我们需要创建一个组件，所有的组件可以放在一个目录里，便于规范化管理。 2.创建所有的组件也需要像根组件一样，严格的格式要求。 &lt;template&gt; ...
vue新建项目(三)构建单页应用(SPA)
小猿猪哥的博客
05-27 4495
在前面的两篇《vue新建项目(一)vue-cli新建模板项目》 和 《vue新建项目(二)安装element-ui》 中，我们已经新建一个vue项目且安装了一套UI，但是这个只是一个页面，那么怎么新建一个单页应用(SPA)呢。 这里我们需要做一点改造。 步骤： 1.在src/components 下面新建一个目录common ，并且在这个目录里面新建一个.vue文件：Home.vue 2.在
基于Vue的简单的单页面应用的实现
weixin_34072159的博客
06-07 1120
原文链接：http://mrzhang123.github.io/2016/06/08/vue-demo-1/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 基于Vue的简单的单页面应用 在对Vue和webpack有了一定了解后，我们就可以开始利用所了...
Vue创建注册页面
热门推荐
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
vue项目中app.vue 、main.js和 index.html的关联
weixin_30483697的博客
06-07 537
1.main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。 import Vue from 'vue' import App from './App' /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } ...
vue-router单页应用简单示例（二）
weixin_30376509的博客
06-18 122
我们先来理一下思路。 图1:main.js 引入vue,App.vue,router/index.js文件 声明要渲染的Id为app，将App.vue中的模版渲染到入口界面（就是打开localhost:8080会看到的那个页面）。 图2:App.vue router-view是显示路由内容的地方，比如/index. 就会显示index.vue中的模版。 图3:r...
vue-app项目知识点总结（一）
青椒的博客
05-25 2019
一. FeatureView 独立组件封装FeatureView div>a>img 二. TabControl 独立组件的封装 props -> titles div>根据titles v-for遍历 div -> span{{title}} css相关 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom current...
Vue 组件传值
qing_bk的博客
12-09 978
一:父子传值 父传子 传 子组件标签内 属性名=值收 props:{ 属性名:{ type:类型,多个类型[Object,Array,String] default:基本数据类型直接写 复杂数据类型 ()=>({}) 或者 ()=>{return {}} required:true 必填 validator:(value)=...
vue组件之间传值的最全面解释
06-01
Vue组件之间传值是Vue框架中的一个重要功能，它允许不同的组件之间共享数据，实现数据的传递和交互。下面是Vue组件之间传值的最全面解释： 1. 父组件向子组件传值：父组件通过props属性向子组件传递数据，子组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值