一、props简易型

1、Student.vue

props:["name1","name2","name3"]

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【Student.vue】---------</h2>
    <h2>入取该校第1名学生:{{ name1 }}</h2>
    <h2>入取该校第2名学生:{{ name2 }}</h2>
    <h2>入取该校第3名学生:{{ name3 }}</h2>
    <button @click="showName">点我提示第一名学生</button>
  </div>
</template>

<script>
// 把组件暴露出去,方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:"Student",
  data() {
    return {

    };
  },
  methods: {
    showName() {
      alert(this.name1);
    },
  },
  props:["name1","name2","name3"]

};

</script>

 
<style>
.demo {
  background-color: rgb(231, 231, 231);
  border: 1px rgb(172, 172, 172) solid;
}
</style>

2、App.vue

<template>
  <div>
    <!-- <Student></Student> -->
    <Student name1="貂蝉" name2="吕布" name3="关羽" ></Student>
    <Student name1="唐僧" name2="观音" name3="如来" ></Student>
  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue'
// 注册组件
export default {
  name: "App",
  components: {
    Student
  },
};
</script>

3、index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

二、props完整型

 1、Student.vue

 props: {

    name1: {

      type: String, // name1的类型是字符串

      required: true, // name1是必须有值

      default:"#请输入姓名#" // 默认值

    },

}

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【Student.vue】---------</h2>
    <h2>入取该校第1名学生:{{ name1 }}</h2>
    <h2>入取该校第2名学生:{{ name2 }}</h2>
    <h2>入取该校第3名学生:{{ name3 }}</h2>
    <button @click="showName">点我提示第一名学生</button>
  </div>
</template>

<script>
// 把组件暴露出去,方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {};
  },
  methods: {
    showName() {
      alert(this.name1);
    },
  },
  props: {
    name1: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default:"#请输入姓名#" // 默认值
    },
    name2: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default:"#请输入姓名#" // 默认值
    },
    name3: {
      type: String, // name1的类型是字符串
      required: false, // name1是必须有值
      default:"#请输入姓名#" // 默认值
    },
  },
};
</script>

 
<style>
.demo {
  background-color: rgb(231, 231, 231);
  border: 1px rgb(172, 172, 172) solid;
}
</style>

2、App.vue

<template>
  <div>
    <!-- <Student></Student> -->
    <Student name1="貂蝉" name2="吕布"  ></Student>
    <Student  name2="观音" name3="如来" ></Student>
  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue'
// 注册组件
export default {
  name: "App",
  components: {
    Student
  },
};
</script>

3.index.html 同上

三、通过Data动态修改或绑定props的属性值

  1、Student.vue

注意:以下三个地方

<template>
  <!-- 组件一 -->
  <div class="demo">
    <h2>---------【Student.vue】---------</h2>
    <h2>入取该校第1名学生:{{ m_Name1 }}</h2>
    <h2>入取该校第2名学生:{{ m_Name2 }}</h2>
    <h2>入取该校第3名学生:{{ m_Name3 }}</h2>
    <button @click="showName">点我修改学生姓名</button>
  </div>
</template>

<script>
// 把组件暴露出去,方便引入  Vue.extend可以省略
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      m_Name1: this.name1,
      m_Name2: this.name2,
      m_Name3: this.name3,
    };
  },
  methods: {
    showName() {
      this.m_Name1 = "唐僧";
      this.m_Name2 = "观音";
      this.m_Name3 = "如来";
      

      // alert(this.name1);
    },
  },
  props: {
    name1: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
    name2: {
      type: String, // name1的类型是字符串
      required: true, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
    name3: {
      type: String, // name1的类型是字符串
      required: false, // name1是必须有值
      default: "#请输入姓名#", // 默认值
    },
  },
};
</script>

 
<style>
.demo {
  background-color: rgb(231, 231, 231);
  border: 1px rgb(172, 172, 172) solid;
  height:280px;
  width:400px;
  padding-left: 10px;
}
.demo button{
  height: 40px;
  width: 200px;
font-size: 18px;
}
</style>

2、App.vue

<template>
  <div>
    <!-- <Student></Student> -->
    <Student name1="貂蝉" name2="吕布" name3="关羽" ></Student>
  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue'
// 注册组件
export default {
  name: "App",
  components: {
    Student
  },
};
</script>

Logo

前往低代码交流专区

更多推荐