1.父传子——通过props传值
实际上父传子 就是通过在 父级组件使用中传自定义属性,子级通过关键字props 来接收使用
知识点
注意是键值对传值 父级传一个自定义属性 属性值为data数据 子级接收的和使用的都是属性名的值
注意 props 的格式 是一个数组 数组里是传过来的属性名
注意 props是一个单独的模块 不在data 里 也不在方法里
注意 父传子的属性名前要加 : v-bind
//子组件 child
<template>
<div>
<p>{{data}}</p>
</div>
</template>
<script>
export default {
name:"child",
props: ['data'],
}
</script>
//父组件
<template>
<div id="app">
<child :data="childdata"></child>
</div>
</template>
<script>
import child from "./components/chid.vue"
export default {
name: 'App',
components: {
child
},
data() {
return {
childdata:"abcdefg"
}
}
}
</script>
2.子传父——通过 this.$emit传值
原理是 子集可以通过 this.$emit 访问到父级的自定义方法,并传值。
父级通过自己的自定义方法获得子级传来的值并储存到data中
知识点
父级通过自定义事件传值 需要在div中的子组件上定义一个自定义事件,并把事件的值写为一个普通事件
子级通过调用this.$emit方法时 记得方法名为父级的自定义事件名 并且记得加==“”==号
//子组件
<template>
<div>
<button @click="setchild" >点击获取父组件值</button>
</div>
</template>
<script>
export default {
name: "child",
data() {
return {
childdata: "child data",
};
},
methods: {
setchild() {
this.$emit("myevent", this.childdata);
},
},
};
</script>
//父组件
<template>
<div id="app">
<child @myevent="getchild"></child>
<p>{{getchilds}}</p>
</div>
</template>
<script>
import child from "./components/chid.vue"
export default {
name: 'App',
components: {
child
},
data() {
return {
getchilds:''
}
},
methods: {
getchild(data){
this.getchilds = data
console.log(data)
}
},
}
</script>