vue转鸿蒙ui开发遇到的一些问题总结（持续更新）

1. 目前版本的console.log()打印（hilog也不行）会有问题，字符'/'后的打印时会消失，但不会影响实际代码。已经提交了问题工单，并得到确认后续版本会解决。

   api版本  api9

   编译器版本 3.1.0.501

   node版本 16.14.1
   

2. 目前版本组件间传值，直接使用$watch不支持深度监听，不能监听到对象中过属性的变化，已经和客服确认。

   可以考虑使用以下代码（并不是最优解，希望有大佬给更多的建议）

   在父组件中将你需要监听并传入给子组件的对象使用计算属性监听

   js中

   export default {
   

     data: {
   

       templateSet:{
   

            dialogShow:false,
            dataList: [
              {
                title:'首页',
                 img:"/common/images/icon.png"
              },
              {
                title:'列表',
                img:"/common/images/icon.png"
              },
              {
                title:'我的',
                img:"/common/images/icon.png"
              }
           ]
          }

      }，

       computed:{

            data_json(){
               return JSON.stringify(this.templateSet)
            }
          },

        has_close(show){
           this.templateSet.dialogShow=show
        }

   }

   在父组件hml中

  <element name='dialogBox' src='../../common/component/dialog/index.hml'></element>
<div class="container">
   <dialogBox template_set="{{data_json}}" is_show="{{templateSet.dialogShow}}" has_close="has_close"></dialogBox>
   <button @click="showDialog">显示dialog</button>
</div>

    在子组件js中

  import utils from '../../utils'
export default {
   props:{
       template_set:{
           default:{}
       },
       is_show:{
           default:false
       }
   },
   data: {
       setting:{
           dataList:[],
           dialogId:'dialogId',
           dialogShow:false,
           dragable:true,
           margin:'0 0 50% 0'
       }
   },
   onInit() {//监听template_set

       this.$watch('template_set','templateChange')
   },
   close(){
       this.$emit('has_close', false);
   },
   templateChange(val,oldval){

utils.find(JSON.parse(val),this.setting)

     // utils为我自己封装的工具类，目的是为了将父组件传入的对象的值 copy到子组件中

//  function find(obj, setting) {
   //将对象遍历 并与另一个进行比较 相同的进行赋值
 //  if (obj && typeof obj === "object") {
     //  for (let key in obj) {
         //  Object.keys(setting).map(item => {
         //      if (key == item) {
           //        if (typeof obj[key] == 'object') {
         //              setting[item] = deepClone(obj[key])
            //       } else {
            //           setting[item] = obj[key]
            //       }
        //       }
    //       })
  //     }
  // }
//}

if(JSON.parse(val).dialogShow){
   this.$element('dialogId').show()
}

},

hml中

<div>
       <dialog  id="{{setting.dialogId}}" dragable="{{setting.dragable}}" @cancel="close"
                class="dialogBox" style="margin:0 0 40% 0">
           <div class="ajcenter content">
               <slot></slot>
           </div>
       </dialog>
</div>

试验证明 可以实现父组件通过对象传值给子组件。