Vue学习（组件传参）-学习笔记

最新推荐文章于 2024-04-20 09:51:11 发布
最新推荐文章于 2024-04-20 09:51:11 发布
阅读量111 收藏
点赞数
分类专栏： 前端学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhmonkey/article/details/118696953
版权
本文详细介绍了Vue中父组件向子组件传递数据（如对象、字符串、事件）的方法，包括Props、ref以及兄弟组件间的通信技巧。重点讲解了父子组件之间的交互，如`$emit`和`$on`，以及如何通过`ref`操作DOM和子组件的方法。
摘要由CSDN通过智能技术生成

文章目录

Vue学习（组件传参）-学习笔记

父到子

Father:（index）

<template>
<div>
  <Banner :img="img" />

  <table class="table"> 
    <thead>
      <tr >
        <th>用户姓名</th>
        <th>用户性别</th>
        <th>所在城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(v,i) in lists" :key="i">
          <td>{{v.name}}</td>
          <td>{{v.sex}}</td>
          <td>{{v.city}}</td>
          <td>
            <!-- 传入不同的标题 -->
            <!-- <Btn :title="'修改'" />
            <Btn :title="'删除'" />
            <Btn :title="'详情'" /> -->
            <!-- 传入多个属性 -->
            <!-- <Btn :title="'详情'" :color="'red'" />
            <Btn :title="'删除'" :color="'blue'" /> -->
            <!-- 传入对象 -->
            <Btn :obj = "obj" />
            <Btn :obj = "obj2" />
          </td>
      </tr>
    </tbody>
  </table>
</div>
</template>

<script>
import Btn from './Btn.vue'
import Banner from './Banner.vue'

export default {
  name:'',
  data(){
    return{
      title:'标题',
      obj:{title:'修改',color:'green'},
      obj2:{title:'删除',color:'red'},
      lists:[
          {name:'张三1',sex:'男',city:'北京1',check:true},
          {name:'张三2',sex:'女',city:'北京2',check:false},
          {name:'张三3',sex:'男',city:'北京3',check:false},
          {name:'张三4',sex:'男',city:'北京4',check:false},
          {name:'张三5',sex:'女',city:'北京5',check:false},
          {name:'张三6',sex:'男',city:'北京6',check:false},
          {name:'张三7',sex:'男',city:'北京7',check:true},
      ],
      img:[
        require("@/assets/img/1.jpg"),
        require("@/assets/img/2.jpg"),
        require("@/assets/img/1.jpg"),
        require("@/assets/img/2.jpg")]
    }
  },
  components:{
    Btn,
    Banner
  }
}
</script>

<style scoped>
ul {
    list-style-type:none;
}
.table{
    width: 70%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.table td,
.table th{
    border: 1px solid #ddd;
    padding: 10px;
}
.table thead tr {
	background:#1f76b3;
	color:#fff;
} 
</style>

Son1:（Btn）

<template>
  <button :style="{color:obj.color}">{{obj.title}}</button>
</template>

<script>
export default {
  name:'',
  data(){
    return{

    }
  },
  //父到子传递参数
  //props:['title','color','obj','event'],  //字符串数组写法
  props:{    //对象写法
    //title:String,
    //color:String,
    // title:{
    //   type:String,
    //   default:'标题'
    // }
    obj:{
      title:String,
      color:String
    }
  },
  methods:{
      
  }
}
</script>

<style scoped>

</style>

Son2:（Banner）（可将banner作为公共的）

<template>
  <div class="banner">
      <img v-for="(v,i) in img" :key="i" :src="v" v-show="n==i"/>
      <!-- <img src="@/assets/img/1.jpg"/>  -->
      <div class="banner-circle">
          <ul>
              <li  v-for="(v,i) in img" :key="i" :class="n==i?'selected':''"></li>  
          </ul> 
      </div>
  </div>
</template>

<script>
export default {
  name:'',
   props:{    //对象写法
    img:{

    }
  },
  data(){
    return{
      n:0,
      timer:null, //定时器
      // img:[
      //   require("@/assets/img/1.jpg"),
      //   require("@/assets/img/2.jpg")]
    }
  },
  methods:{
    autoPlay(){
      this.timer = setInterval(this.play,2000);
    },
    play(){
      this.n++;
      if(this.n>=this.img.length){
        this.n = 0;
      }
    }
  },
  mounted(){   //挂载完成
    this.autoPlay();
  },
  destroyed(){  //销毁
    clearInterval(this.timer)
  }
}
</script>

子到父

Son:（Btn）

<template>
  <button @click="send()">按钮</button>
</template>

<script>
export default {
  name:'',
  data(){
    return{
      msg:'我是按钮组件'
    }
  },
  props:{    
    event:Function
  },
  methods:{
      send(){
        //this.$emit('e-child',this.msg);   //发射
         this.$emit('e-child',this.event);   //发射
      }
  }
}
</script>

Father:（index）

<template>
<div>
  {{title}}
  <table class="table"> 
    <thead>
      <tr >
        <th>用户姓名</th>
        <th>用户性别</th>
        <th>所在城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(v,i) in lists" :key="i">
          <td>{{v.name}}</td>
          <td>{{v.sex}}</td>
          <td>{{v.city}}</td>
          <td>
            <!-- 子传父  接收消息@e-child="acceptSon-->
            <Btn  @e-child="acceptSon"/>
            <!-- 子操作父的方法  :event="add" 传入父的方法-->  //就是把event传过去给子，子接收后再通过发射传回来父操作
            <Btn :event="add"  @e-child="acceptSon"/>
          </td>
      </tr>
    </tbody>
  </table>
</div>
  
</template>

<script>
import Btn from './Btn.vue'

export default {
  name:'',
  data(){
    return{
      lists:[
          {name:'张三1',sex:'男',city:'北京1',check:true},
          {name:'张三2',sex:'女',city:'北京2',check:false},
          {name:'张三3',sex:'男',city:'北京3',check:false},
          {name:'张三4',sex:'男',city:'北京4',check:false},
          {name:'张三5',sex:'女',city:'北京5',check:false},
          {name:'张三6',sex:'男',city:'北京6',check:false},
          {name:'张三7',sex:'男',city:'北京7',check:true},
      ]
    }
  },
  methods:{
    add(){
      this.title = 10;
    },
     acceptSon(d){  //接收子消息
      //this.title = d;  //d=msg
      d();
     }
  },
  components:{
    Btn
  }
}
</script>

<style scoped>
ul {
    list-style-type:none;
}
.table{
    width: 70%;
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}
.table td,
.table th{
    border: 1px solid #ddd;
    padding: 10px;
}
.table thead tr {
	background:#1f76b3;
	color:#fff;
} 
</style>

父操作子-ref（类似于操作dom）

父（index）

<template>
<div>
  姓名：<input type='text' ref='input'/>
  <h1 ref='h1'>{{title}}</h1>
  <button @click="change()">按钮</button>
  <div>
    子组件：<Btn :obj="obj" ref='btn'/>
  </div>
  
</div>
  
</template>

<script>
import Btn from './Btn.vue'

export default {
  name:'',
  data(){
    return{
      title:'标题',
      obj:{title:"按钮",color:"red"}
 
    }
  },
  methods:{
    change(){
     // console.log(this.$refs.btn);
     // this.title= 12432432;
      this.$refs.input.focus();
      this.$refs.h1.style.color='red';
      //this.title = this.$refs.btn.msg;//直接获取子组件中的属性
      this.title = this.$refs.btn.send(); //直接操作子组件中的方法
    }
  },
  components:{
    Btn
  }
}
</script>

子（Btn）

<template>
  <button :style="{color:obj.color}" >{{obj.title}}</button>
</template>

<script>
export default {
  name:'',
  data(){
    return{
      msg:'我是按钮组件'
    }
  },
  //父到子传递参数
  //props:['title','color'],  //字符串数组写法
  props:{    //对象写法
    //title:String,
    //color:String,
    // title:{
    //   type:String,
    //   default:'标题'
    // }
    obj:{
      title:String,
      color:String
    },
    event:Function
  },
  methods:{
      send(){
        return 100
      }
  }
}
</script>

兄弟之间传参

父（index）- 中间桥梁作用

<template>
<div>
  <h1>父组件：</h1>
  <!-- 第一种：testB发射到父，父改变title值 -->
  <!-- <testA :title="title"/> -->
  <!-- <testB @e-child="acceptSon"/> -->
  <!-- 第二种  ref 只能获取到B的值，不能修改-->
  <testB ref='testB' />
  <testA :title="title"/>
</div>
</template>

<script>
import testA from './testA.vue'
import testB from './testB.vue'

export default {
  name:'',
  data(){
    return{
      title:'123'
    }
  },
  mounted(){  //考虑到加载顺序，在testA取值时，testB还没有加载完，在等挂载完成后再赋值
    this.title = this.$refs.testB.title;
  },
  methods:{
     acceptSon(res){
       this.title = res;
     }
  },
  components:{
    testA,
    testB
  }
}
</script>

兄（testA）

<template>
<div>
  testA组件：{{title}}  
</div>  
</template>

<script>
export default {
  name:'',
  data(){
    return{
      //title:'testA'
    }
  },
  props:{  //父传子
    title:String
  }
}
</script>

弟（testB）

<template>
<div>
  testB组件：
  <input type="text" v-model="title" @input="send()"/>
</div> 
</template>

<script>
export default {
  name:'',
  data(){
    return{
      title:'testB'
    }
  },
  methods:{
     send(){
       this.$emit('e-child',this.title);
     }
  }
}
</script>
monkeyhlj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3学习笔记-- 组件化 - 插槽Slot(重点)/非父子通信
专注于 前端开发 知识分享
10-01 842
插槽的使用过程其实是 抽取共性 预留不同;我们会将 共同的元素 内容依然在组件内 进行封装同时会将 不同的元素使用slot作为占位,让外部来决定到底显示什么样的元素;
Vue3学习笔记-组件化 - 组件间通信
专注于 前端开发 知识分享
09-30 609
封装一个CounterOperation.vue的组件内部其实是监听两个按钮的点击,点击之后通过this.$emit的方式发出去事件methods:{// 改变App.vue文件中的counter的数值// 让子组件 发出一个自定义事件// 第一个参数 是自定义的事件名称,第二个参数是传递的参数}}}自定义事件的时候 我们也可以传递一些参数给父组件// this.$emit(参数名称,传参值)}// 2 emits 对象语法 好处:可以给参数进行验证emits:{
vue+requirejs页面带参跳转
06-07
vue用requirejs进行模块化后页面带参跳转
vue路由3种传参方式
tanqin的博客
10-21 346
vue路由传参3中方式：query传参1种、params传参2种。
Vue学习第三天，组件类型检查
annuo0615的博客
09-13 326
参考：Prop — Vue.js 父组件=>对子组件传值是通过prop的方法来进行传递，在使用prop的时候，我们有时候需要对这个值进行检查，可能期待得到一个字符串或者需要对这个长度进行约束等。这个时候我们就需要一种方法，来进行自定义的检查。 首先先看一个简单的 Vue.component('ul-lik', { ...
vue自定义指令 focus获取焦点
Lei_Xue的博客
11-28 4459
<inputtype="text"v-focus> 1.//全局自定义指令 代码要放在new Vue的上面 //注册一个全局自定义指令`v-focus` //使用Vue.directive()定义全局的指令v-focus //其中参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀 ...
Vue的@focus和@change
热门推荐
鲨鱼辣椒灬的博客
05-30 2万+
@focus:一般是更新下拉框,每次打开会请求后端方法 @change:就是你要联动的方法 作者：ll594317566 来源：CSDN
vue基础学习笔记 --- 组件间数据的传输方式（7种，vue2环境下）
MImi_0612的博客
08-07 1207
vue组件间传值的7中方法：props、自定义事件、$bus、pubsub-js、vuex、插槽slot、provide和inject跨组件传值
Vue学习05-传参
正在成长的不可观测喵呜机的博客
05-05 293
Vue传参 本文仅仅为本人学习vue的简易笔记，内容不严谨，有瑕疵，请慎重浏览 ​ 首先需要在 hello-vue目录下的src文件夹中创建 components（组件）文件夹 --本案例中并未使用组件， router（路由）文件夹 和views（视图）文件夹 main.js import Vue from 'vue' import App from './App' import router from './router' import Element from 'element-ui'
Vue超详细学习笔记
最新发布
2301_76379381的博客
04-20 737
进入主页面首先显示欢迎页，然后利用子路由单页多显示；< template-name >：表示模板名称，vue-cli官方为我们提供了5种模板，一般使用webpack（全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展）；如果用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由，如果选择y，后面下载依赖会自动下载vue-router；也就是菜单的路由方式，子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式；
vue中父组件必须给子组件传值，required必加属性
qq_45656036的博客
07-22 8961
当父组件给子组件传递属性时，我们可以在子组件接受属性的时候，加上一个必加属性required:true。代码演示： 1.先在父组件中设置需要传递给子组件的值： return{ propB:['name','lalisa'] } 2.在父组件中挂载和使用子组件并把属性传递给子组件： <about :propB='propB'></about> 3.在子组件中接收父组件传递来的属性 props:{ propB:{ type:Array, requir
vue9种跨组件传参-props、$emit、$refs、$EventBus、消息订阅与发布...
TKY666的博客
08-29 3288
通过 props 传递 通过 $emit 触发自定义事件 使用 ref EventBus $parent 或$root attrs 与 listeners Provide 与 Inject Vuex
常用vue传值方法（10种）
前端-黎姿
03-19 2880
一、父传子 在父组件中引入子组件 在引入的子组件上写上要传递的值 如要将父组件的name传递给子组件 在子组件的props中写上 props: { inputName: String, required: true } 完整例子： 父组件： 父组件: ...
require方法接受以下几种参数的传递：
有 prepare , No out
09-10 1万+
require方法接受以下几种参数的传递： http、fs、path等，原生模块。./mod或../mod，相对路径的文件模块。/pathtomodule/mod，绝对路径的文件模块。mod，非原生模块的文件模块。
vue中参数传递（合集）
boy火巨的博客
09-10 2万+
前段时间项目用vue搭建整个前端页面，我负责的模块有个地方在页面跳转时得将参数传递到下一个页面，但是由于参数较多，用url带参数传递不是特别好，我尝试了多种方法想在页面之间传递参数都没成功，最后想到了vuex，当时又是刚开始学vue对vuex更是了解不多废了一点时间，好在问题解决了，下面分享我解决问题的代码，希望对大家有所帮助。 一.页面跳转通过路由带参数传递数据 // 1.页面中的代码 t...
Vue - 路由传递参数
weixin_30462049的博客
07-25 3254
Vue 2.0 路由传递参数 Vue 路由传递参数 有两种方式： 一、用name传递参数 　　两步完成用name传值并显示在模板里： 在路由文件src/router/index.js里配置name属性。 1 2 3 4 5 6 7 routes: [ { path: '/...
vue页面带参跳转（用requirejs进行模块化）
zuo-yiran的博客
06-07 7602
最近开始用vue，对其简单地运用记录一下。 首先项目结构如下所示： 要实现的是从发送短信模块带参数跳到下个页面 首先： 在有跳转得页面的跳转按钮用标签包住：<router-link></router-link>加上 :to=”{path:’xzjsr’,query: {id:postdata.dept_id}}”代码如下：<router-link class="xzjsr" :to="{p
vue-router传递参数方法（3种）
wenmin1987的博客
09-26 7265
第一种：get方法 传递值 <router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link> 或 <router-link :to="{name:'test',query: { userId: 123,userName:'xia' }}">跳转</router-link> 接收值（页面刷新的时候不会消失） this.$route.que
vue的传参方式和router使用技巧
大灰狼的小绵羊哥哥的博客
06-04 3369
vue传参方法一https://www.cnblogs.com/luozhixiang/p/9072441.html1，路由配置 { path: '/describe/:id', name: 'Describe', component: Describe }2，使用方法// 直接调用$router.push 实现携带参数的跳转 this.$router...
vue 兄弟组件传参
09-05
在Vue中，兄弟组件之间传参有两种方式。第一种是使用Vue自带的功能，通过在共同的父组件中定义一个数据，然后在兄弟组件中通过props进行传递。这种方法适用于Vue2版本。第二种方法是使用插件，在Vue3中可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值