vue之组件之间的传值

最新推荐文章于 2024-07-23 14:29:05 发布

przlovecsdn

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量460

点赞数

分类专栏： VUE 文章标签： vue 组件传值父子组件传值非父子组件传值 vue组件传值

本文链接：https://blog.csdn.net/przlovecsdn/article/details/81509588

版权

本文详细介绍了Vue中组件之间的通信方式，包括父组件如何向子组件传递数据，子组件如何通知父组件进行状态更新，以及非父子组件间的数据传递策略。

摘要由CSDN通过智能技术生成

1、父组件向子组件传值

//parent.vue
<template>
    <div>
        <child :send-msg-to-child="toChildMsg"></child>
    </div>
</template>
<script>
import child from './child.vue';
export default{
    name:'parent',
    props:[],
    data(){
        return {
            toChildMsg:'about data to child component'
        }
    },
    components:{
        child
    }
}
</script>
---------------------------------------------------
//child.vue
<template>
    <div>{
  {sendMsgToChild}}</div>
</template>
<script>
export default{
    name:'child',
    props:['sendMsgToChild'],
    data(){
        return {
            
        }
    },
    methods:{
    
    }
}
</script>