props配置项组件之间传值

飞熊 • 2023年9月9日下午11:26 • 技术随笔 • 阅读 191

场景共用组件的使用只使用一部分还需要有自己的
在App组件中

<template>
  <div class="container">
 //name,sex,age传的属性
    <Student name="小鸡炖蘑菇" sex="好" :age='18'></Student>
  </div>
</template>

<script>
// 引入组件 汇总所有需要的组件 这个是模块化的引入
// import School from "./components/School";
import Student from './components/Student.vue';
export default {
  name: "App",
  data() { 
    return {
      msg:'哈IIEUJI我欧文1'
    };
  },
  //   注册组件
  components: {
    Student
  },
  methods:{

  }

};
</script>

<style scoped lang="scss">
</style>

在子组件student中

<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <h2>学校年龄:{{ myAge+1 }}</h2>
    <button @click="updateAge">尝试修改外部传来的属性</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg:"道道道 天下道",
      myAge:this.age
    };
  },
  methods:{
    updateAge(){
      this.myAge++
    }
  },
  // 此时的外部传进来的不允许修改 要想修改需要新配置 (传进来的属性不要和vue用过的属性名重复 避免冲突) 先准备好接收的 再配置数据
  props:['name','age','sex'], 
  // 限制类型
  // props:{name:String,age:Number,sex:String}
  // 丰富写法
  props:{
    name:{
      type:String,//name的类型是字符串
      required:true,//required是必要的
      default:99//默认值
    },
    age:{
      type:Number,//
      default:99
    },
    sex:{
      type:String,
      require:true
      }
  }
      
};
</script>
 
<style scoped >
</style>

配置项 props

功能：让组件接收外部传过来的数据
1 传递数据
2 接收数据:
第一种方式(只接收)
props:[‘name’]
第二种方式(限制类型)
props:{
name:Number
}
第三种方式(限制类型。限制必要性。指定默认值):
props:{
name:{
type:String,//类型
required:true,//必要性
default:‘老王’,//默认值
}
}
备注:props是只读的,Vue底层会检测你对props的修改如果进行了修改就会发出警告
若业务需求确实需要修改那么请复制props的内容到data中一份然后去修改data中的数据