Vue 组件传值

一. 父子组件传值

? 步骤: 1. 在子组件标签中通过v-bind把自定义属性赋值为父组件的动态数据
?
? 2. 在子组件对象中通过props字段添加自定义属性
? props: ["myData"]
? 3, 在子组件模板中, 使用自定义属性渲染数据
? {{myData}}

    
    
    

        父组件中的输入: 
         

        

        子组件的显示:
        
    
    
      
    

二 . 子传父

    
    
    

        
         

        父组件显示: {{fatherData}}
    
    
    
    

三 . 非父子组件传值

四 . 插槽传值

 
    
    

        父组件输入:                           
         

        默认在组件标签之间的信息会被忽略
        
        {{name}}
    
    
    
    
    
    

        父组件动态数据 

        
            父组件数据1
            父组件数据3