简单示例
APP.vue
<template>
<div>
<img :src="imgSrc">
<!-- 父子传值 --> <!-- 自定义属性直接 通过属性传值 -->
<Vheader :cityArray="citys"></Vheader> <!-- 自定义事件 -->
<Vfooter v-on:addZhuangHandler="addHandler"></Vfooter>
</div> </template> <script>
import imgSrc from './assets/bili.jpg'
import Vheader from './components/Vheader'
import Vfooter from './components/Vfooter' export default {
name: "app",
data() {
return {
imgSrc: imgSrc,
citys:["山东","北京","深圳"] }
},
methods:{
addHandler (str){
// alert(str)
this.citys.push(str);
alert(this.citys);
}
},
components: {
Vheader,
Vfooter
}, } </script> <style scoped> </style>
Vfooter.vue
<template>
<footer class="wrap">
我是Vfooter，我想测试下给父级组件添加数据: <br>
<button @click="addCunHandler">给父级组件的数据增加点什么，添加一个村庄</button>
</footer>
</template> <script>
export default {
name: "Vfooter",
data() {
return {}
},
methods:{
addCunHandler(){
// 触发自定义事件
this.$emit('addZhuangHandler','破村庄');
},
}, }
</script> <style scoped> </style>
Vheader.vue
<template>
<header class="wrap"> 我是header，我从父级组件那里拿到了数据很开心：
<ul v-for="item in cityArray">
{{item}}
</ul>
</header>
</template> <script>
export default {
name: "Vheader",
data() {
return {}
},
methods: {},
props: {
cityArray: Array
// 如果验证不通过会报错
// [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山东,北京,深圳", got Array
},
}
</script> <style scoped> </style>
实例详解
app-----> header
父组件向子组件传值
<!-- 自定义属性直接 通过属性传值 -->
<Vheader :cityArray="citys"></Vheader>
子组件从 父组件拿值
拿值的时候必须要校验类型，
拿值的时候的要对应父组件的自定义属性一致才可以拿到
props: {
cityArray: Array
]
如果有错误是拿不到的
如果写错类型也会报错。
// 如果验证不通过会报错
// [Vue warn]: Invalid prop: type check failed for prop "cityArray". Expected String with value "山东,北京,深圳", got Arra
footer------->app
子组件向父组件传值
在methods 中加入事件触发传值操作
利用 $emit() 方法传值
$emit("自定义属性的名字","要被传入的数据")
methods:{
addCunHandler(){
// 触发自定义事件
this.$emit('addZhuangHandler','破村庄');
},
},
父组件得到子组件传递值
父组件中首先要对子组件中那提供一个自定义的属性
<!-- 自定义事件 -->
<Vfooter v-on:addZhuangHandler="addHandler"></Vfooter>
对这一属性绑定一个事件，接受的数据将会作为参数被此事件调用
methods:{
addHandler (str){
this.citys.push(str);
alert(this.citys);
}
},
总结
- 自定义属性传值
- 校验后取值
- $emit("自定义属性的名字","要被传入的数据")