父组件向子组件传值
父组件定义一个自定义属性,把父组件内的值放在属性对应的value上。
子组件通过props进行接收父组件的属性。
父组件:
<globalHeader :parentName='name'></globalHeader>
<script>
import globalHeader from "./component/header/global-header.vue";
export default {
name: "app",
data(){
return {
name:"Bob"
}
},
components: {
globalHeader,
},
};
</script>
子组件:
<template>
<div>
{{parentName}}
</div>
</template>
<script>
export default {
name: "GlobalHeader",
props:['parentName']
};
</script>
props有两种接受方法,
1.用数组接收数据。不限制数据类型
props:['parentName'],
2.用对象接受数据。可以对数据类型进行限制;
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true,
},
// 带有默认值的数字
propD: {
type: Number,
default: 100,
},
// 数组写法
propK: {
type: Array,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return ["张三"];
},
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: "hello" };
},
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].indexOf(value) !== -1;
},
}
}
子组件向父组件传值
子组件发射一个自定义事件,
this.$emit(“number”, this.childCounter);
这里的number就是发射的自定义事件,this.childCounter就是需要传给父组件的数据。
在父组件引入的地方,绑定上这个number事件,是@ + 事件,在父组件创建一个函数来接收值。
然后通过参数来输出子组件的值,就可以完成子组件向父组件的传值。
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div>
父组件的值:{{parentCounter}}
</div>
<div>
<child-component @number="getParentData">
</child-component>
</div>
</div>
</body>
<script>
const app = Vue.createApp({})
const Counter = {
data() {
return {
parentCounter: "还未获取子组件的值"
}
},
component: {
"child-component": "child-component"
},
methods: {
getParentData(res) {
this.parentCounter = res
}
}
}
var childObj = {
data() {
return {
childCounter: 0
}
},
methods: {
addCounter() {
this.childCounter++
this.$emit("number", this.childCounter)
}
},
template: `
<div>子组件的值:{{childCounter}}</div>
<div>
<span>我是子组件的点击按钮</span>
<button @click=addCounter>
点击
</button>
</div>`
}
Vue.createApp(Counter).component('child-component', childObj).mount('#app')
</script>
</html>