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

爱被打了一巴掌 2023-01-23 05:59 18阅读 0赞

### 文章目录 ###

*   *  Vue学习（组件传参）-学习笔记
     *   *  父到子
         *  子到父
         *  父操作子-ref（类似于操作dom）
         *  兄弟之间传参

## 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 :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"/>
          
          <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>
                
                <Btn @e-child="acceptSon"/>
                  //就是把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 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>