LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

Vue组件通信

2022/5/26 vue

1.父传子(props)

功能:让组件接收外部传过来的数据

(1)传递数据(父组件):

           <Demo  name="xxx"/> 或   <Demo  :age="xxx"/> 
           直接传是字符串,如name,通过绑定传递的是js表达式,如果绑定了变量,需要再data中声明

(2) 接收数据(子组件):

第一种(只接收):props:['name','age']
第二种(限制类型):
               props:{
                   name:String,
                   age:Number
               }
第三种(限制类型、限制必要性、指定默认值): 通常required和default不会同时出现
               props:{
                   name:{
                       type:String,//类型
                       required:true//是否必须传值
                   },
                   age:{
                       type:Number,
                       default:18  //父组件未传值时使用,指定默认值
                   }
               }
注意:通过props接收的变量是只读的,不可以直接修改,如果进行了修改,就会发出警告
    如果确实需要修改,那么请复制props中的内容到data中一份,然后修改data中的数据
              data(){
                  return{
                  myage:this.age//props中的变量先出现,data中后出现,可在这里使用props中的数据进行复制                 
                  },
                  methods:{
                      updateage(){
                          this.myage++//修改时修改data中的数据
                      }
                  }
              }
img_show