【Vue】【子组件】调用【父组件】参数，props属性值【动态】调用的两种方法（图文+完整代码）

一、简易型1、Student.vueprops:["name1","name2","name3"]<template><div class="demo"><h2>---------【Student.vue】---------</h2><h2>入取该校第1名学生：{{ name1 }}</h2&gt

敦厚的曹操

2623人浏览 · 2022-03-29 09:09:47

敦厚的曹操 · 2022-03-29 09:09:47 发布

一、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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^