父子组件互相传值
1. 父组件引用子组件
1)父组件引用子组件,先导入子组件,在<script></script>
内。import name(给子组件起个名字) from “子组件地址”
2) 然后components:{
{name}}
,然后就可以在<template></template>
内使用子组件了。
2. 父组件传值给子组件:
1)父组件向子组件传递数据(props):
父组件<child :showModal="showModal"> </child>
,可以传多个值,可设置多个。前面的冒号是v-bind的简写
子组件:在<script></script>
用props接收,因为是数据,可以解说多个。然后就可以直接用接收到的数据
parent:
<template>
<view>
<child :showModal="showModal"></child>
</view>
</template>
<script>
import child from "../../components/child.vue"
//引用子组件
export default {
components: {
child
},
data() {
return {
showModal: " parent say hello"
};
},
methods