父子组件传值-父传子
关于父子组件传值中的父传子,做出如下简单代码进行介绍:
<!-- 父组件挖坑显示,但是值必须将子组件和父组件绑定,否则不能显示 -->
<cpn :cinfo="info"></cpn>
</div>
<!-- 组件语法糖,调用子组件定义的值 -->
<template id="tem">
<div>
{{cinfo}}
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//子组件
const cpn = {
// template绑定组件语法糖,将cpn与template绑定
template: "#tem",
//组件中保存数据的data为什么必须是函数,而且必须有return?为了保证数据的复用,当return
//之后,可以保证每一次出来的数据都是不一样且相互独立,当不加return时,返回的数据都是一样的
data() {
return {
}
},
//子组件通过props接受父组件的值,此处的cinfo为自定义,与父组件中的info对应
props: {
cinfo: {
//type:类型
type: Object,
//default:默认值
default() {
return {
}
}
}
}
}
//父组件
const app = new Vue({
el: "#app",
data: {
info: {
name: "aaa",
age: 17,
height: 1.9
}
},
//在父组件中注册子组件(我的理解就是将父组件与子组件挂钩)
components: {
cpn
}
})
</script>
以下是子传父:
div id=“app”>
<cpn :cinfo=“info” @cpnclick=“fclick”>
<!-- 组件语法糖,调用子组件定义的值 -->
<template id="tem">
<div>
<!-- 子组件中的点击事件需要在子组件中定义方法 -->
<button v-for="i in but" @click="btnclick(i)">{{i.name}}</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
//子组件
const cpn = {
template: "#tem",
data() {
return {
but: [
{ id: 1, name: "西医" },
{ id: 2, name: "中医" },
{ id: 3, name: "骗子" }
]
}
},
methods: {
btnclick(i) {
//子组件通过this.$emit向父组件传递cpnclick这个方法,参数i一般可以不写
this.$emit("cpnclick", i)
}
}
}
//父组件
const app = new Vue({
el: "#app",
data: {
info: {
name: "aaa",
age: 17,
height: 1.9
}
},
//在父组件中注册子组件(我的理解就是将父组件与子组件挂钩)
components: {
cpn
},
// 在父组件中定义方法,参与子组件传递的值
methods: {
fclick(i) {
console.log("fclick", i)
}
}
})
</script>
父子组件传值,父传子,在子组件使用props来接收,但是子传父相对麻烦,在子组件中使用this.$emit来向父组件发送自定义事件。以上是我的个人见解,不足之处,后续补出。