1. Simple props
1、Student.view
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.view
<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>
2. Complete props
1、Student.view
props: {
name1: {
type: String, // the type of name1 is a string
required: true, // name1 must have a value
default:"#Please enter your name#" // Default value
},
}
<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.view
<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 same as above
3. Dynamically modify or bind the property value of props through Data
1、Student.view
Note: the following three places
<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.view
<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>