這篇文章將為大家詳細講解有關(guān)vue組件如何實現(xiàn)彈射小球，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了靈臺免費建站歡迎大家使用！

1. 定義每個彈射的小球組件( ocicle )

2. 組件message自定義屬性存放小球初始信息(可修改)

{
 　　　top: "0px",    //小球距離上方坐標
　　　left: "0px",    //小球距離左邊坐標
　　　speedX: 12,   //小球每次水平移動距離
　　　speedY: 6     //小球每次垂直移動距離
}

3. 思路

3.1 定時器設(shè)置小球每一幀移動

3.2 初始方向：isXtrue為true則小球為橫坐標正方向；

isYtrue為true則小球為縱坐標正方向

3.3 每次移動之前獲取小球當前坐標(oleft,otop)，當前坐標加上移動距離為下一幀坐標

3.4 邊界判斷：橫軸坐標范圍超過最大值則加號變減號

4. vue知識點

4.1 父子組件傳遞信息使用props

4.2 模板編譯之前獲取el寬高

beforeMount: function (){
  this.elWidth=this.$el.clientWidth;
  this.elHeight=this.$el.clientHeight;
}

4.3 子組件獲取el寬高 ( this.$root.elWidth,this.$root.elHeight )

4.4 模板編譯完成后更新子組件信息

mounted: function (){
  //根據(jù)父組件信息更新小球數(shù)據(jù)
  this.addStyle.top=this.message.top;
  this.addStyle.left=this.message.left;
  this.speedX=this.message.speedX;
  this.speedY=this.message.speedY;
  //小球初始坐標
  this.oleft=parseInt(this.addStyle.left);
  this.otop=parseInt(this.addStyle.top);
  this.move();
}

5. 代碼