vue.js의 믹스인이란 무엇입니까?
- coldplay.xixi원래의
- 2020-11-11 10:30:182416검색
vue.js mix-in은 재사용 가능한 메서드 또는 계산된 속성의 일부를 정의합니다. mix-in 개체에는 구성 요소 옵션이 포함될 수 있습니다. 구성 요소 자체의 옵션에 혼합됩니다.
이 튜토리얼의 운영 환경: windows10 시스템, vue2.4.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.
【추천 관련 글: vue.js】
混入(믹스인)은 재사용 가능한 메소드나 계산된 속성을 정의합니다. 믹스인에는 임의의 구성 요소 옵션이 포함될 수 있습니다. 구성 요소가 mixin 개체를 사용하면 mixin 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다.
간단한 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("欢迎来到混入实例");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>옵션 병합:
구성 요소와 믹스인 개체에 동일한 이름의 옵션이 포함된 경우 이러한 옵션은 적절한 방식으로 혼합됩니다.
예를 들어 데이터 객체는 내부적으로 재귀적으로 병합되며, 구성 요소 데이터와 충돌이 있는 경우 구성 요소 데이터가 우선 적용됩니다.
참고:
(1)은 다양한 속성 값을 포함하는 혼합 개체에 데이터 속성을 설정한다는 의미입니다. 구성 요소에도 데이터 속성이 있고, 그런 다음 혼합 개체의 데이터 값과 구성 요소 개체가 병합되고 동일한 이름을 가진 개체가 병합됩니다. 구성 요소 데이터는 제한됩니다.
(2) 동일한 이름의 후크 함수가 호출되고 혼합 개체의 후크가 호출됩니다.
Global mixin
형식은
Vue.mixin({ // 混入函数 })주의! 주의해서 사용하세요. 전역 믹스인 객체를 사용하면 나중에 생성되는 모든 Vue 인스턴스에 영향을 미칩니다. 적절하게 사용하면 사용자 정의 개체에 처리 논리가 주입될 수 있습니다.
관련 무료 학습 권장 사항: JavaScript(동영상)
위 내용은 vue.js의 믹스인이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!