一、子组件向父组件传值
1、子向父传值 需要用到自定义事件 $emit。
2、this.$emit('自定义的事件名')
3、当自定义事件触发时，所绑定的函数，就能自动获得这个事件在创建的时候 所写的参数
-
4、一般 子向父传值，自定义事件写在 子组件里面
image.png 5、然后在 父组件中 子标签上 触发这个自定义属性
6、当触发自定义事件(byval)时，就能获取到自定义事件上所携带的数据(this.cdata)
-
7、父组件中 子组件的标签上触发事件，由于事件的触发 必须绑定函数
image.png -
8、所以在父组件中我们需要定义一个接收数据的函数，这个函数 可以自动获得 子组件中传递过来的参数(数据)
image.png
二、父组件向子组件传值
-
1、我们可以在子组件中的 props中定义变量
第一种写法有数据类型，type写什么数据类型，就能传递什么数据类型
如果你定义的数据类型不匹配，则会根据设置的数据类型强制转化
image.png
第二种写法 不规定数据类型时，按照下面的写法
image.png
-
2、然后在父组件内使用 子组件props定义的变量传值
image.png
-
3、子组件中可以直接将这个变量当做数据来使用
三、最后子传父、父传子的效果图
image.png
两组件的代码如下
子组件 Child.vue
<template>
<div id="child">
<h1>{{ msg }}</h1>
<button @click="sendData">子向父传值</button>
<!-- 父组件中的数据 -->
<h2>{{ abc }}</h2>
<h3>{{ aaa }}</h3>
</div>
</template>
<script>
export default {
name: 'Child',
data() {
return {
msg: '这是子组件',
cdata : '这是子组件中的数据',
}
},
props : {
abc : {
// 定义父组件传递过来的数据类型
type : String,
requored : true,
// 如果你定义的数据类型不匹配，则会根据设置的数据类型强制转化
}
},
// 不规定数据类型时，按照下面的写法
props: ["abc", 'aaa'],
methods: {
sendData() {
console.log(this);
// 子向父传值 需要用到自定义事件 $emit
// this.$emit('自定义的事件名')
// 当自定义事件触发时，所绑定的函数，就能自动获得这个事件在创建的时候 所写的参数
this.$emit('byval',this.cdata);
}
}
}
</script>
<style lang="less" scoped>
#child {
padding: 10px;
border: 3px solid #007aff;
width: 90%;
height: 400px;
margin: auto;
}
</style>>
</style>
父组件 Father.vue
<template>
<div id="father">
<h1>{{ msg }}</h1>
<!-- 子组件中的数据 -->
<h2>{{ data1 }}</h2>
<!-- 子组件 -->
<Child :abc="fdata" :aaa="aaa" @byval="getdata" />
</div>
</template>
<script>
// 引入子组件
import Child from '@/components/Child.vue';
export default {
name: 'Father',
data() {
return {
msg: '这是父组件',
fdata: '这是父组件里面的数据1',
aaa: '这是父组件里面的数据2',
data1: '',
}
},
components: {
Child,
},
methods: {
// 定义一个获取子组件传值的方法
getdata(datas) {
// datas 就是子向父传过来的数据
// 由于函数内的参数 不能直接用于渲染
// 所以我们需要在父组件的data中 定义一个变量
// 来接收一下 子组件传递过来的参数
this.data1 = datas;
}
}
}
</script>
<style lang="less" scoped>
</style>>
</style>
