vuejs에서 부모-자식 통신을 설정하는 방법
- 青灯夜游원래의
- 2021-09-06 15:26:122115검색
vuejs에서 상위-하위 통신을 설정하는 방법: 1. 상위 구성 요소는 props를 사용하여 하위 구성 요소에 데이터를 전달합니다. 2. 하위 구성 요소는 "$emit"를 통해 상위 구성 요소에 메시지를 보냅니다. sync" 구문 설탕; 4. " $attrs" 및 "$listeners"를 사용하십시오. 5. private을 사용하고 주입하십시오.
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.
Vue에는 상위 구성 요소와 하위 구성 요소 간에 다음과 같은 통신 방법이 있습니다.
props
$emit - 구성 요소 캡슐화가 더 일반적으로 사용됩니다.
.sync - 구문 설탕
$ attrs 및 $listeners - 구성 요소 캡슐화에 일반적으로 사용됨
privide 및 inject - 상위 구성 요소
다음은 일상적인 개발에 자주 사용되는
1 및 props
를 각각 소개합니다. 간단히 말하면, 수도관처럼 상위 구성요소의 데이터가 하위 구성요소로 위에서 아래로 흐르며 역방향으로 흐를 수 없는 것처럼 소품을 통해 하위 구성요소에 데이터를 전달할 수 있습니다. 이는 Vue 디자인 도입의 단일 데이터 흐름이기도 합니다.
<div id="app">
<child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
template: '<h2>{{ content }}</h2>',
props: {
content: {
type: String,
default: () => { return 'from child' }
}
}
})
new Vue({
el: '#app',
data: {
message: 'from parent'
},
components: {
Child
}
})2. $emit
공식적인 소개는 현재 인스턴스에서 이벤트를 트리거하는 것이며 추가 매개변수가 리스너 콜백에 전달됩니다.
<div id="app">
<my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({
template: '<button @click="triggerClick">click</button>',
data () {
return {
greeting: 'vue.js!'
}
},
methods: {
triggerClick () {
this.$emit('greet', this.greeting)
}
}
})
new Vue({
el: '#app',
components: {
MyButton
},
methods: {
sayHi (val) {
alert('Hi, ' + val) // 'Hi, vue.js!'
}
}
})3. .sync 수정자
는 vue1.x에서 양방향 바인딩 기능으로 존재했습니다. 즉, 하위 구성 요소가 상위 구성 요소의 값을 수정할 수 있습니다. 단방향 데이터 흐름이라는 설계 개념을 위반했기 때문에 vue2.x에서는 제거되었지만 이 .sync 수정자는 vue 2.3.0+ 이상에서 다시 도입되었습니다. 그러나 이는 컴파일 타임 구문 설탕으로만 존재합니다. 상위 구성 요소의 속성을 자동으로 업데이트하는 v-on 리스너로 확장됩니다.
경우에 따라 소품에 "양방향 바인딩"을 수행해야 할 수도 있습니다. 불행하게도 진정한 양방향 바인딩은 하위 구성 요소가 상위 또는 하위 구성 요소의 명백한 변경 소스 없이 상위 구성 요소를 수정할 수 있기 때문에 유지 관리 문제를 발생시킵니다.
구문 설탕은 다음 형식으로 작성됩니다
3aad4a5f8d6d21b85f13f5b7d90449ce d093019edc1fd049b9381d54424ed8e7
따라서 .sync 구문 설탕을 사용하여 다음 형식으로 축약할 수 있습니다.
<text-document v-bind:title.sync="doc.title"></text-document>
양방향 바인딩을 구현하는 방법(예: 텍스트의 값 변경)
<div id="app">
<login :name.sync="userName"></login> {{ userName }}
</div>
let Login = Vue.extend({
template: `
<div class="input-group">
<label>姓名:</label>
<input v-model="text">
</div>
`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})코드에는 문장이 하나만 있습니다.
this.$emit('update:name', newVal)
공식 구문은 다음과 같습니다. update:myPropName 여기서 myPropName은 prop 값을 나타냅니다. 업데이트됩니다. 물론 .sync 구문 설탕을 사용하지 않고 위의 .$emit을 사용하면 동일한 효과를 얻을 수 있습니다
4. $attrs 및 $listeners
공식 웹사이트에서는 $attrs를 다음과 같이 설명합니다.
props로 인식되고 획득되는 상위 범위 속성 바인딩(클래스 및 스타일 제외)에 없는 항목을 포함합니다. 구성 요소가 소품을 선언하지 않으면 모든 상위 범위 바인딩(클래스 및 스타일 제외)이 여기에 포함되며 내부 구성 요소는 v-bind="$attrs"를 통해 전달될 수 있습니다. - 상위 수준 구성 요소를 생성할 때 매우 유용합니다.
공식 웹사이트에서는 $listeners를 다음과 같이 설명합니다.
상위 범위의 v-on 이벤트 리스너를 포함합니다(.native 수정자 없음). v-on="$listeners"를 통해 내부 구성 요소로 전달할 수 있습니다. 더 높은 수준의 구성 요소를 만들 때 매우 유용합니다.
$attrs 및 $listeners 속성은 두 개의 저장 상자와 같습니다. 하나는 속성 저장을 담당하고 다른 하나는 이벤트 저장을 담당합니다. 둘 다 객체 형식으로 데이터를 저장합니다.
<div id="app">
<child
:foo="foo"
:bar="bar"
@one.native="triggerOne"
@two="triggerTwo">
</child>
</div>let Child = Vue.extend({
template: '<h2>{{ foo }}</h2>',
props: ['foo'],
created () {
console.log(this.$attrs, this.$listeners)
// -> {bar: "parent bar"}
// -> {two: fn}
// 这里我们访问父组件中的 `triggerTwo` 方法
this.$listeners.two()
// -> 'two'
}
})
new Vue({
el: '#app',
data: {
foo: 'parent foo',
bar: 'parent bar'
},
components: {
Child
},
methods: {
triggerOne () {
alert('one')
},
triggerTwo () {
alert('two')
}
}
})보시다시피 사용할 수 있습니다. 데이터를 저장하는 $attrs 및 $listener 필요한 곳에 전달, 호출 및 처리하는 것은 여전히 매우 편리합니다. 물론 v-on="$listeners"를 통해 레벨별로 전달할 수도 있으며, 자손은 끝이 없을 것입니다!
5, private and inject
provide/inject에 대한 공식 설명을 살펴보겠습니다.
Provide 및 inject는 주로 고급 플러그인/구성 요소 라이브러리에 대한 사용 사례를 제공합니다. 애플리케이션 코드에서 직접 사용하는 것은 권장되지 않습니다. 그리고 이 옵션 쌍은 구성 요소 계층 구조의 깊이에 관계없이 상위 구성 요소가 모든 하위 구성 요소에 종속성을 주입할 수 있도록 함께 사용해야 하며 업스트림 및 다운스트림 관계가 설정된 시점부터 항상 적용됩니다.
ab509c080ec9f7ec77efedb1cdcd4bed
1207412ca14c1d8bb1c5d564f723d29198f9e0de16d4632c0e387ffd4bb1294d
16b28748ea4df4d9c2150843fecfba68
let Son = Vue.extend({
template: 'c1a436a314ed609750bd7c7d319db4dason2e9b454fa8428549ca2e64dfac4625cd',
inject: {
house: {
default: '没房'
},
car: {
default: '没车'
},
money: {
// 长大工作了虽然有点钱
// 仅供生活费，需要向父母要
default: '￥4500'
}
},
created () {
console.log(this.house, this.car, this.money)
// -> '房子', '车子', '￥10000'
}
})
new Vue({
el: '#app',
provide: {
house: '房子',
car: '车子',
money: '￥10000'
},
components: {
Son
}
})
더 많은 예를 보려면 element-ui 소스 코드를 참조하세요. 그 중 다수가 이 방법을 사용합니다
관련 권장 사항: "vue.js tutorial"
위 내용은 vuejs에서 부모-자식 통신을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!