VUE父子组件传值

Posted 2022-12-06 Y飞羽Y

从父组件的角度来看：

<!--   向子组件传了两个值，placeholder和text-url   -->
<!--   子组件向父组件传了一个函数，叫做setAreaUser，在子组件里面可以用this.$emit("returnData",value) 来调用父组件的setAreaUser函数，其中value是要传递的参数   -->
<box-input placeholder="xxx"  text-url="/h5/getResidentNameList" @returnData="setAreaUser"></box-input>

从子组件的角度来看：

//子组件用这种方法接收父组件的值
 props:
      placeholder:
        type: String,
        default: '请输入搜索的内容'
      ,
      textUrl:
        type:String,
        default:''
      
    

//子组件用这种方法向父组件传值
methods:
    test: function () 
        this.$emit("returnData","这是要传回去的值");
      ,