父子组件相互传参

第一步:在父组件中声明需要传递的参数   

 tempchoseimg: '',   // 插图  无值 传递个变量过去 值在子组件中

第二步:在父组件中给子组件传递参数 sync 相互 

<tempshow :tempchoseimg.sync="tempchoseimg"></tempshow>

第三步:子组件接收父组件的参数 

 props: ["opentempShow", "tempchoseimg"],

第四步:子组件给接收到的父组件参数赋值 然后传递到父组件中 父组件无需接收  sync 同步

 chooseTempUrl(img) {
      this.chooseImg = img;
      this.$emit('update:tempchoseimg', img)
      // console.log(this.chooseImg)
    },

第五步:父组件直接应用子组件传递过来的参就可以

        <div
          class="temp-bg mt10"
          :style="{ backgroundImage: 'url(' + baseurl + tempchoseimg+')' }"
          style="display: block; width: 185px; height:315px"
        ></div>

注意:这里子组件没有对参数作出操作行为,若是子组件也用到该参数,需要watch监听

posted @ 2020-11-11 14:16  里拉米苏  阅读(278)  评论(0编辑  收藏  举报