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>
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐