父传子组件 / 子传父组件 一起实现。
#注意子组件向父组件值(通过事件形式)
1.父组件
<!-- // 父组件 father.vue-->
<template>
<div id="app">
<son v-on:titleChanged="updateTitle" v-bind:verify_num="verify_num" ></son>
<!-- //与子组件titleChanged自定义事件保持一致 -->
<!-- // updateTitle($event)接受传递过来的文字 -->
<h2>{{title}}</h2>
</div>
</template>
<script>
// 注意引用路径
import son from "@/pages/index/son.vue"
export default {
data(){
return{
title:"接收参数",
verify_num:"13465"
}
},
methods:{
updateTitle(e){ //声明这个函数
this.title = e;
}
},
components:{
"son":son,
}
}
</script>
2.子组件
<!-- // 子组件 -->
<template>
<view >
<!-- 1.子向父传递参数 -->
<header>
<h1 @click="changeTitle">{{title}}</h1>
<!-- //绑定一个点击事件 -->
</header>
<!--2.父向子传递参数 -->
<view >{{verify_num}} </view>
</view>
</template>
<script>
export default {
props:['verify_num'],
name: '',
data() {
return {
title:"点击我 son Demo",
name:"tony",
name1:"tom",
}
},
mounted() {
console.log(this.verify_num)
},
methods:{
changeTitle() {
this.$emit("titleChanged",{"子向父组件传值":this.name,"子向父组件传值1":this.name1});
// 自定义事件 传递值“子向父组件传值”
}
}
}
</script>