Vue 컴포넌트에 방출구를 작성하는 방법

1. 방출된 각 공 컴포넌트(ocicle)를 정의합니다

2. 컴포넌트 메시지 사용자 정의 속성은 공의 초기 정보를 저장합니다(수정 가능)

{top: "0px",        //小球距离上方坐标　　　
 left: "0px",       //小球距离左边坐标　　　
 speedX: 12,      //小球每次水平移动距离　　　
 speedY: 6         //小球每次垂直移动距离
}

3.Idea

　3.1 각 공에 대한 타이머 설정 프레임 이동

　　3.2 초기 방향: isXtrue가 true이면 공은 가로좌표의 양의 방향에 있게 됩니다. ), 현재 좌표와 이동 거리는 다음 프레임의 좌표입니다.

　　3.4 경계 판단: 수평일 때 축 좌표 범위가 최대값을 초과하면 더하기 기호가 빼기 기호로 변경됩니다

4. Vue 지식 포인트

　4.1 상위-하위 구성요소는 정보를 전송하기 위해 소품을 사용합니다

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 (){    //根据父组件信息更新小球数据
    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. 으아악

위 내용은 Vue 컴포넌트에 방출구를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!