vue 基础之父子组件传值

一.组件特点和传值的原因

组件特点：组件与组件之间是相互独立的，数据也是相互独立的，但是组件与组件之间不可避免的要进行数据通信。

组件与组件之间的关系不同，传值的方式也不同。分为三种关系：

父组件传值给子组件

子组件传值给父组件

非父子传值 (如vuex统筹管理)

二.父组件传子组件

下面这个demo 用的是js引入的方法，父组件绑定动态属性，子组件用props接收对应的值

注意，实际传值过程中，如果要改变props中的值，不能直接处理，一般用computed重新创建一个属性，做相对应的处理，

 
        父组件
        
    
    
    
    

三.子组件向父组件传值

核心逻辑：子组件通过this.$emit("事件名"，值) 让父组件绑定这个事件名从而接收子组件传过来的值。

 
        父组件接收到子组件的值 {{msg}}
        
         父子组件传值
    
    
    
    

以上就是全部的基础组件传值内容，如果有什么地方有问题，欢迎回访，希望以后的日子里能和大家共同进步！😊😊😊