Vue操作

操作dom节点

querySelector

// 查找某个id下的span标签，存在多个只返回第一个
let page = this.$el.querySelector("#id").querySelector("span");
// 配置dom属性
page.id = "search-result";
page.style.backgroundColor = "yellow";
// 设置上下居中
page.scrollIntoView({ block: "center" });

querySelectorAll

// 找个所有span标签返回数组，只存在一个时也返回数组
let list = this.$el.querySelectorAll("span");
if (list.length > 0) {
  list.forEach((e) => {
  // 配置dom属性
  e.style.backgroundColor = "yellow";
  });
}

Vue子组件定义Prop

常规用法

props:{
  name:String
}

较完整用法

props:{
  num:{
    type:Number,
    required:true,
    default:10
  }
}

数据类型为数组、函数、对象时用法

• 数组（Array）

props:{
  list:{
    type:Array,
    required:true,
    default:() => {
        return []
    }
  }
}

• 函数（Function）

props:{
  fun:{
    type:Function,
    required:false,，
    default:() => () => {}
  }
}

• 对象（Object）

props:{
  obj:{
    type:Object,
    required:false,
    default:() => ({})
  }
}