props的作用
props作用在于父组件向子组件传递数据，便于父组件在调用子组件的时候，以属性的方式传递数据。
props入门小例子
- 定义子组件
<template>
<div class="container" :style="{'border':'1px solid red', 'width':'30vh'}">
<el-row >
<el-col :span="24">
<p><span>userName = {{ userName }}</span></p>
<p><span>userAge = {{ userAge }}</span></p>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "CalculateComponent",
props: ["userName", "userAge"],
data() {
return {};
},
methods: {},
};
</script>
<style scoped></style>
- 定义父组件，调用子组件，传数据
<template>
<div class="test">
<calculate-component userName="张三" userAge="30"></calculate-component>
</div>
</template>
<script>
import CalculateComponent from '@/components/CalculateComponent.vue';
export default {
components: { CalculateComponent },
name: "test",
data() {
return {
};
},
watch: {},
mounted() {},
beforeCreate() {},
created() {},
methods: {},
};
</script>
<style scoped></style>
props可以传递的数据类型
项目开发中常用，传入对象和数组
- 子组件
<template>
<div class="container" :style="{'border':'1px solid red', 'text-align':'left', 'padding-left':'20px'}">
<el-row >
<el-col :span="24">
<p><span>userName = {{ userName }}</span></p>
<p><span>userAccess = {{ userAccess }}</span></p>
<p><span>userObj = {{ userObj }}</span></p>
<p><span>userArr = {{ userArr }}</span></p>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "CalculateComponent",
props: ["userName", "userAccess", "userObj", "userArr"],
data() {
return {};
},
methods: {},
};
</script>
<style scoped></style>
- 父组件，调用子组件
<template>
<div class="test">
<calculate-component
:userName="tempUserName"
:userAccess="tempUserAccess"
:userObj="tempUserObj"
:userArr="tempUserArr">
</calculate-component>
</div>
</template>
<script>
import CalculateComponent from '@/components/CalculateComponent.vue';
export default {
components: { CalculateComponent },
name: "test",
data() {
return {
tempUserName: "李四",
tempUserAccess: true,
tempUserObj: {
"id" : "123456",
"family" : ["father", "sister", "brother"],
"info" : {
"age" : 30,
"address" : "吉林省长春市朝阳区"
},
},
tempUserArr: ["Hello", "World"],
};
},
watch: {},
mounted() {},
beforeCreate() {},
created() {},
methods: {},
};
</script>
<style scoped></style>
props传递方法
- 子组件
<template>
<div class="container">
<el-row >
<el-col :span="24">
<el-button type="success" @click="doClickBtn">点击按钮</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "CalculateComponent",
props: {
calculateUser: {
type: Function,
required: true, // 确保这个prop被正确传递了，否则会显示警告。
}
},
data() {
return {};
},
methods: {
doClickBtn() {
this.calculateUser();
}
},
};
</script>
<style scoped></style>
- 父组件
<template>
<div class="test">
<calculate-component :calculateUser="doParentMethod"></calculate-component>
</div>
</template>
<script>
import CalculateComponent from '../../components/CalculateComponent.vue'
export default {
components: {
CalculateComponent
},
name: "test",
data() {
return {
};
},
watch: {},
mounted() {},
beforeCreate() {},
created() {},
methods: {
doParentMethod() {
console.log("=====> exceute parent method");
}
},
};
</script>
<style scoped></style>
props单向传值
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
注意
如果子组件代码修改了prop属性的值，那么vue会报错提示：
avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders错误总结：
prop定义在子组件里面，父组件可以修改传入prop的变量，但是子组件不允许修改暴露的prop属性。
