VUE2 : 父子组件传值

最新推荐文章于 2024-09-13 15:40:26 发布

春哥的魔法书

最新推荐文章于 2024-09-13 15:40:26 发布

阅读量3k

点赞数 21

分类专栏： VUE 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/yuanchun05/article/details/138869673

版权

VUE 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

3.4.父子组件传值

3.4.1.子组件接收信息

父组件显示子组件模板, 通过 props , $attrs 接值

3.4.1.1.子组件

通过 props 属性接到父组件传来值, 在子组件中可以通过 this 来使用这些信息

也可以通过 $attrs 接收没有被 props 声明的值

<template>
  <div>
    <input type="text" :value="value" />{{msg}} <br>
    a: {{a}} , other: {{$attrs}} <br>
  </div>
</template>
<script>
export default {
  name: "BaseComp1",
  props: {
    msg: {
      type: String,
      default: "数值"
    },
    a:{
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      value: this.msg + ", 子组件信息"
    }
  }
}
</script>

3.4.1.2.父组件

通过 msg 属性向子组件传值

也可以通过 v-bind 一次性传递多组信息

<template>
  <div>
       <BaseComp1 msg="父组件传递的信息"   v-bind="{a:100, b:200, c:300}"   />
  </div>
</template>

<script>
import BaseComp1 from "./BaseComp1.vue"

export default {
  name: "index",
  components: {
    BaseComp1
  }
}
</script>

3.4.2.子组件 watch 监听

父组件传递动态信息 , 子组件 watch 监听信息

3.4.2.1.子组件

通过 watch 监听父组件传来 msg 信息, 在回调函数中修改子组件中的信息

<template>
  <div>
    <input type="text"  :value="value"  />
  </div>
</template>
<script>
export default {
  name: "BaseComp2",
  props: {
    msg: {
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
      value: this.msg + ", 子组件信息"
    }
  },
  watch: {
    msg: {
      handler(nv) {
        this.value = nv + ", 父信息改变了"
      }
    }
  },
}
</script>

3.4.2.2.父组件

向子组件传 msg 信息, 通过按钮修改msg, 被子组件watch监听

<template>
  <div>
    <BaseComp2 :msg="msg"  />{{msg}}
    <button @click="change">修改信息</button>
  </div>
</template>

<script>
import BaseComp2 from "./BaseComp2.vue"

export default {
  name: "index",
  components: {
    BaseComp2
  },
  data() {
    return {
      msg: "父组件msg",
    }
  },
  methods: {
    change(){
      this.msg = "父组件修改信息"
    }
  }
}
</script>

3.4.3.通过 props 传函数

父组件传递函数 , 子组件调用函数回传值

3.4.3.1.子组件

接收父组件传来 getData() 函数, 调用此函数回传信息

<template>
  <div>
    <input type="text"  :value="value"  />
    <button @click="getData(value)">返回数据</button>
  </div>
</template>
<script>
export default {
  name: "BaseComp3",
  props: {
    msg: {
      type: String,
      default: "数值"
    },
    getData: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      value: this.msg + ", 子组件信息"
    }
  }
}
</script>

3.4.3.2.父组件

向子组件传getData , 类型为函数, 子组件调用时触发监听函数 reData() 接收到值

<template>
  <div>
    <BaseComp3 :msg="msg"  :getData="reData"  />{{msg}} -{{reMsg }}
  </div>
</template>

<script>
import BaseComp3 from "./BaseComp3.vue"

export default {
  name: "index",
  components: {
    BaseComp3
  },
  data() {
    return {
      msg: "父组件msg",
    }
  },
  methods: {
  	reData(val){
      console.log( "返回信息:", val )
      this.reMsg = val
    }
  }
}
</script>

3.4.4.v-model绑定信息

子组件在 props 中使用value 接收信息 v-model的值, 通过 input 接收返回信息

页面 UI 组件最长用的方式

3.4.4.0.v-model的本质

v-model 实现双向绑定的原理 , 是 value 属性及 input 事件

    <input :value="msg"  @input="msg=$event.target.value" /> <br>

3.4.4.1.子组件

通过 value 接收到父组件 v-model 传来的信息

通过 v-model 双向绑定 childMsg, 当在子组件修改这个值时, 会被 watch 监听到

再通过 this.$emit(‘input’, nv + “返回信息”); 通过 input 返回数据

<template>
  <input type="text"  v-model="childMsg"  />
</template>
<script>
export default {
  name: "BaseComp4",
  props: {
    value: {
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
      childMsg: this.value + ", 子组件信息"
    }
  },
  watch: {
    childMsg: {
      handler(nv) {
        console.log(nv)
        this.$emit('input', nv + "返回信息");
      }
    }
  }
}
</script>

3.4.4.2.父组件

在父组件通过 v-model 双向绑定 msg , 子组件通过 input 事件返回子组件返回的信息

<template>
  <div>
    <h1>组件测试</h1>
    <h4> BaseComp4 :   子组件在 props 中使用value 接收信息 v-model的值  </h4>
    <h4> 通过  input 接收返回信息  </h4>
    <BaseComp4 v-model="msg"  /> {{msg}}
  
  </div>
</template>

<script>

import BaseComp4 from "./BaseComp4.vue"

export default {
  name: "index",
  components: {
    BaseComp4
  },
  data() {
    return {
      msg: "父组件msg",
    }
  }
}
</script>

3.4.5.textarea

3.4.5.1.子组件

将 input 换成 textarea 效果是一样

<template>
  <textarea   v-model="childMsg"  ></textarea>
</template>
<script>
export default {
  name: "BaseComp5",
  props: {
    value: {
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
      childMsg: this.value + ", 子组件信息"
    }
  },
  watch: {
    childMsg: {
      handler(nv) {
        console.log(nv)
        this.$emit('input', nv + "返回信息");
      }
    }
  }
}
</script>

3.4.5.2.父组件

<template>
  <div>
    <BaseComp5  v-model="msg" /> {{msg}}
  </div>
</template>

<script>
import BaseComp5 from "./BaseComp5.vue"

export default {
  name: "index",
  components: {
    BaseComp5
  },
  data() {
    return {
      msg: "父组件msg",
    }
  }
}
</script>

3.4.6.select

3.4.6.1.子组件

接收到 value , options

下拉框也可以通过 input 事件, 返回信息

<template>
  <div>
    <select  v-model.number="selVal" >
      <option v-for="item in options" :key="item.value" :value="item.value" >{{item.label}}</option>
    </select>
  </div>
</template>
<script>
export default {
  name: "BaseComp6",
  props: {
    value: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selVal: this.value
    }
  },
  watch: {
    selVal: {
      handler(nv) {
        console.log(nv)
        this.$emit('input', nv);
      }
    }
  }
}
</script>

3.4.6.2.父组件

<template>
  <div>
    <BaseComp6  v-model="selVal" :options="checkOptions" /> {{selVal}}
  </div>
</template>

<script>
import BaseComp6 from "./BaseComp6.vue"
export default {
  name: "index",
  components: {
    BaseComp6
  },
  data() {
    return {
      selVal: 0,
      checkOptions: [
        {
          label: "选项0",
          value: "0"
        },
        {
          label: "选项1",
          value: "1"
        },
        {
          label: "选项2",
          value: "2"
        },
        {
          label: "选项3",
          value: "3"
        },
        {
          label: "选项4",
          value: "4"
        }
      ]
    }
  }
}
</script>

3.4.7.radio

3.4.7.1.子组件

单选框也是通过 input 事件返回信息

<template>
  <div>
      <label v-for="item in options" :key="item.value" >
        <input type="radio" v-model.number="selVal" :value="item.value"   > {{item.label}}
      </label>
  </div>
</template>
<script>
export default {
  name: "BaseComp4",
  props: {
    value: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selVal: this.value
    }
  },
  watch: {
    selVal: {
      handler(nv) {
        console.log(nv)
        this.$emit('input', nv);
      }
    }
  }
}
</script>

3.4.7.2.父组件

<template>
  <div>
    <CheckComp1 v-model="selVal"  :options="checkOptions" /> {{selVal}}
  </div>
</template>

<script>
import CheckComp1 from "./CheckComp1.vue"

export default {
  name: "index",
  components: {
    CheckComp1
  },
  data() {
    return {
      selVal: 0,
      checkOptions: [
        {
          label: "选项0",
          value: "0"
        },
        {
          label: "选项1",
          value: "1"
        },
        {
          label: "选项2",
          value: "2"
        },
        {
          label: "选项3",
          value: "3"
        },
        {
          label: "选项4",
          value: "4"
        }
      ]
    }
  }
}
</script>

3.4.8.checkbox

3.4.9.1.子组件

用 value 接收到数组

<template>
  <div>
      <label v-for="item in options" :key="item.value" >
        <input type="checkbox" v-model.number="checkVals" :value="item.value"   > {{item.label}}
      </label>
  </div>
</template>
<script>
export default {
  name: "BaseComp4",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkVals: this.value
    }
  },
  watch: {
    checkVals: {
      handler(nv) {
        console.log(nv)
        this.$emit('input', nv);
      }
    }
  }
}
</script>

3.4.8.2.父组件

通过数组类型 selVals: [0,1], 向子组件传值

<template>
  <div>
    <CheckComp2 v-model="selVals"  :options="checkOptions" /> {{selVals}}
  </div>
</template>

<script>
import CheckComp2 from "./CheckComp2.vue"

export default {
  name: "index",
  components: {
    CheckComp2
  },
  data() {
    return {
      selVals: [0,1],
      checkOptions: [
        {
          label: "选项0",
          value: "0"
        },
        {
          label: "选项1",
          value: "1"
        },
        {
          label: "选项2",
          value: "2"
        },
        {
          label: "选项3",
          value: "3"
        },
        {
          label: "选项4",
          value: "4"
        }
      ]
    }
  }

}
</script>

3.4.9.model 自定义

通过 model 在子组件中自定义接收值 ,及返回事件

3.4.9.1.子组件

通过 model 来自定义属性

<template>
  <input type="text"  v-model="childMsg"  />
</template>
<script>
export default {
  name: "BaseComp7",
  props: {
    // value: {
    //   type: String,
    //   default: "数值"
    // },
    customModelValue: {
      type: String,
      default: "数值"
    }
  },
  model: {
    prop: 'customModelValue', // 与父组件 v-model 绑定的 prop 名称
    event: 'updateCustomModelValue' // 触发更新父组件数据的事件名
  },
  data() {
    return {
      childMsg: this.customModelValue + ", 子组件信息"
    }
  },
  watch: {
    childMsg: {
      handler(nv) {
        console.log(nv)
        this.$emit('updateCustomModelValue', nv + "返回信息");
        // this.$emit('input', nv + "返回信息");
      }
    }
  }
}
</script>

3.4.9.2.父组件

父组件使用 v-model:xxx 来指定向子组件传递值

<template>
  <div>
    <BaseComp7  v-model:customModelValue="msg" /> {{msg}}
  </div>
</template>

<script>
import BaseComp7 from "./BaseComp7.vue"

export default {
  name: "index",
  components: {
    BaseComp7
  },
  data() {
    return {
      msg: "父组件msg",
    }
  }
}
</script>

3.4.10.`.sync` 父子同步

3.4.10.1.子组件

使用 update:msg 向父组件同步数据

<template>
  <input type="text"  v-model="childMsg"  />
</template>
<script>
export default {
  name: "BaseComp4",
  props: {
    msg: {
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
      childMsg: this.msg + ", 子组件信息"
    }
  },
  watch: {
    childMsg: {
      handler(nv) {
        console.log(nv)
        this.$emit('update:msg', nv + "返回信息");
      }
    }
  }
}
</script>

3.4.10.2.父组件

不再使用 v-model 来监听子组件回传数据, 而是通过 .sync 来同步子组件返回的数据

<template>
  <div>
    <SyncComp1 :msg.sync="msg"  /> {{msg}}
  </div>
</template>

<script>

import SyncComp1 from "./SyncComp1.vue"

export default {
  name: "index",
  components: {
    SyncComp1
  },
  data() {
    return {
      msg: "父组件msg"
    }
  }
}
</script>

3.4.11.Click事件回传数据

3.4.11.1.子组件

使用按钮的 click事件来返回数据

<template>
  <div>
    <input type="text"  :value="childMsg"  />
    <button @click="returnData">点击</button>
  </div>

</template>
<script>
export default {
  name: "ClickComp1",
  props: {
    value: {
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
      childMsg: this.value + ", 子组件信息"
    }
  },
  methods: {
    returnData() {
      this.$emit("input", this.childMsg + "返回信息")
    }
  }
}
</script>

3.4.11.2.父组件

<template>
  <div>
   <ClickComp1 v-model="msg"  /> {{msg}}
  </div>
</template>

<script>

import ClickComp1 from "./ClickComp1.vue"

export default {
  name: "index",
  components: {
    ClickComp1
  },
  data() {
    return {
      msg: "父组件msg",
    }
  }
}
</script>

3.4.12.computed监听数据

3.4.12.1.子组件

使用 computed 来返回数据

<template>
  <div>
    <input type="text"  v-model="childMsg1"  />
    <input type="text"  v-model="childMsg2"  />
  </div>

</template>
<script>
export default {
  name: "BaseComp4",
  props: {
    value: {
      type: String,
      default: "数值"
    }
  },
  data() {
    return {
    }
  },
  computed: {
    childMsg1: {
      get() {
        return this.value+", 有子组件信息";
      },
      set(val) {
        this.$emit('input', val);
      }
    },
    childMsg2: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

3.4.12.2.父组件

<template>
  <div>
    <ComputedComp1  v-model="msg"  /> {{msg}}
  </div>
</template>

<script>

import ComputedComp1 from "./ComputedComp1.vue"

export default {
  name: "index",
  components: {
    ComputedComp1
  },
  data() {
    return {
      msg: "父组件msg",
    }
  }
}
</script>

3.4.13.数据转汉字

3.4.13.1.子组件

<template>
  <div>
    <el-input v-model.number="num"></el-input>
    <span>{{ numStr }}</span>
  </div>
</template>

<script>
export default {
  name: "NumToString",
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      num: this.value,
      numStr:''
    }
  },
  watch: {
    num: {
      handler(nv) {
        this.numStr = this.numberToChinese(nv)
        this.$emit('input', nv);
      }
    }
  },
  methods: {
	// 转换函数
    numberToChinese(num) {
      const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
      const units = ['', '十', '百', '千', '万', '十', '百', '千', '亿', '十', '百', '千', '万'];

      // 处理负数和0的情况
      if (num === 0) return '零';
      if (num < 0) return '负' + numberToChinese(-num);

      let chineseNum = '';
      let currentUnitIndex = 0;
      num = num.toString().split('').reverse();

      for (let digit of num) {
        let digitStr = digits[digit];
        if (digit !== '0') {
          chineseNum = digitStr + units[currentUnitIndex] + chineseNum;
          // 遇到非零数字后，前面的零不再发音
          if (currentUnitIndex > 0 && digitStr !== '一' && chineseNum.charAt(chineseNum.length - 1) === '零') {
            chineseNum = chineseNum.slice(0, -1);
          }
        } else {
          if (chineseNum.length === 0 || chineseNum.charAt(chineseNum.length - 1) !== '零') {
            chineseNum += '零';
          }
        }
        if (digit !== '0' || (digit === '0' && currentUnitIndex % 4 === 0)) {
          currentUnitIndex++;
        }
      }
      // 格式化结果，移除不需要的零和单位
      chineseNum = chineseNum.replace(/零+([亿|万])/g, '$1').replace(/零+$/, '').replace(/^零+/, '');
      return chineseNum;
    }
  }
}
</script>

3.4.13.2.父组件

<NumToString v-model="num"  ></NumToString>

3.4.14.数值范围

3.4.14.1.子组件

<template>
  <div>
    <el-input-number v-model="range.min" placeholder="请输入最小值" controls-position="right" ></el-input-number>
    <span style="margin-left: 10px; margin-right:10px;">~</span>
    <el-input-number v-model="range.max" placeholder="请输入最大值" controls-position="right" ></el-input-number>
  </div>
</template>

<script>
export default {
  name: 'NumberRangeInput',
  props: {
    value: {
      type: Array,
      default: () => [null, null]
    }
  },
  data() {
    return {
      range: {
        min: this.value[0],
        max: this.value[1]
      }
    };
  },
  watch: {
    range: {
      handler(newValue) {
        this.$emit('input', [newValue.min, newValue.max]);
      },
      deep: true
    }
  }
};
</script>

3.4.14.2.父组件

  <NumberBetween v-model="rangeArray"  ></NumberBetween>

...

  rangeArray: [null, null],

3.4.15.$refs 找子组件

通过 $refs 找到子组件调用子组件函数

3.4.15.1.子组件

子组件中定义函数接收val 参数

<template>
  <div>
    <input type="text"  :value="childMsg"  />
  </div>

</template>
<script>
export default {
  name: "ChildComp1",
  data() {
    return {
      childMsg: '子组件信息'
    }
  },
  methods: {
    setData(val) {
      this.childMsg =  "子组件信息" + val
    }
  }
}
</script>

3.4.15.2.父组件

在父组件中通过 $refs 找到指定的组件

<template>
  <div>
    <ChildComp1  ref="child1" />
    <button @click="$refs.child1.setData('父组件传递的信息')">修改子组件信息</button>
  </div>
</template>

<script>

import ChildComp1 from "./ChildComp1.vue"

export default {
  name: "index",
  components: {
    ChildComp1
  },

}
</script>