详解vue中父子参数传递双向的方式不同
作者：胡斌附体
本文主要介绍了详解vue中父子参数传递双向的方式不同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
在面试中被问到。平时也有用到，但是缺少总结
- 父传子。父页面会给子页面中定义的props属性传参，子页面接收
- 子传父。父页面需要监听事件来接收子页面通过$emit发送的消息
- 其实说的以上两种都是组件之间传递。还可以通过路由传参, 状态管理器的方式传递
下面是子传父
<!-- 子组件 -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('messageSent', 'Hello from child!');
}
}
};
</script>
<!-- 父组件 -->
<template>
<div>
<ChildComponent @messageSent="handleMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleMessage(message) {
console.log(message); // 'Hello from child!'
}
}
};
</script>
这里是父传子
<!-- 父组件 -->
<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
props: ['message']
};
</script>到此这篇关于详解vue中父子参数传递双向的方式不同的文章就介绍到这了,更多相关vue 父子参数传递双向 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！