Vue 리셋은 어떻게 props,emit를 사용하여 사용자 정의 양방향 귀속을 실현합니까
4930 단어 Vue.js
본 논문을 읽으신 것을 환영합니다. 본 논문은 주로 [Vue 회로를 다시 만드는 방법은props,emit를 어떻게 사용하여 사용자 정의 양방향 귀속을 실현하는지]를 설명하고 문자가 통속적이고 알기 쉬우며 타당하지 않으면 많은 지적을 바랍니다.
Vue 자체 속성을 사용하여 간단한 양방향 바인딩을 수행합니다.
다음 예는 부모 구성 요소가 서브 구성 요소에 전달되는 (서브 구성 요소 정의
props 속성을 이용하여 부모 구성 요소의 서브 구성 요소에 귀속되는 속성), 서브 구성 요소가 부모 구성 요소에 전달되는 (서브 구성 요소에서 사용 $emit() 속성을 사용하여 트리거 방법을 정의하고 부모 구성 요소의 서브 구성 요소가 이 사건을 감청하는 것) 이다.import Vue from 'vueEsm'
var Com = {
name:'Com',
props:['val'],
template:``,
methods: {
handleInput(e){
this.$emit("input",e.target.value);
}
},
}
new Vue({
el:'#app',
data() {
return {
value:''
}
},
components:{
Com
},
template:`
`,
methods:{
post(data){
this.value=data;
}
}
})
위의 예는 input 탭에 입력할 때마다 원생 이벤트
input를 터치하고 이 이벤트에 handleInput 방법을 귀속시켰으며 이벤트가 터치할 때마다 실행 방법$emit의 속성을 실행합니다.이 속성 안의 첫 번째 파라미터는 하나의 이벤트 이름을 정의할 수 있고, 두 번째 파라미터는 하나의 파라미터를 전달할 수 있다.여기에 우리는 매번 입력한 값e.target.value을 전송한다.부모 구성 요소의 하위 구성 요소에서 이 사건을 감청하고 post 방법을 정의합니다. 방법의 매개 변수는 전송된 데이터입니다.그리고 우리는 부모 구성 요소의 data 속성에 저장 값의 변수를 정의한다value.방금 들어온 매개 변수를 이 변수에 부여합니다 value.마지막으로 부모 구성 요소의 하위 구성 요소에 사용자 정의 속성을 연결합니다. 예를 들어 val.value를 val에 전달하다.서브어셈블리에서 props 속성을 정의하여 이것을 받아들인다val.이 예는 부모 구성 요소와 하위 구성 요소의 값을 이해하는 데 특히 중요하다.
읽어주셔서 감사합니다. 감회가 오시면 좋아요를 눌러주시고 주석을 꺼주세요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
