组件之间的传值 子传父

 

01===》子传父 使用函数的方式 接受
zi.vue
<template>
<div>
子组件:
<span>hha</span>
<button @click="clickBtn"> 点我传递给父亲 </button>
</div>
</template>

export default {
data(){
return{
msg:"儿子数据 传递给父亲"
}
},

methods: {
clickBtn(){
this.$emit("getval",this.msg) //触发自定义事件 参数1:自定义事件的名称 参数2：要传递的参数
}
},
}



fu.vue
ps=====>在自定义组件上， 绑定的所有事件句柄（不管是静态 还是动态）都是自定义事件 不会自动触发 需要手动触发
<template>
<div>
父组件:
<child @getval="getzivalue"></child>
</div>
</template>


<script>
import child from "../zi/zi"
export default {
components: {
child
},
data () {
return {

}
},

methods:{
getzivalue(mess){
console.log("儿子传递过来的参数"+mess) //输出 “儿子数据 传递给父亲”
}
}
}
</script>

 

01====》面试题

1. v-if和v-show的区别？

v-if使用的是节点操作，removeChild或者appendChild

v-show使用的是css的dispaly来进行隐藏和显示

2. props和data的区别？

data是组件内部数据，由组件自己创建，自己维护

props是外部数据，由外部创建传入，由外部维护！

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：​​晚来南风晚相识​​​

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。