vue.js 믹스인이 무엇인가요?
- 青灯夜游원래의
- 2020-11-23 11:01:301666검색
Vue.js의 Mixing은 Vue 구성 요소에 재사용 가능한 함수를 배포하는 메서드 또는 계산된 속성입니다. 목적: 1. 생성자가 작성된 후 이때 믹스인을 사용하여 메서드나 임시 활동을 추가할 때 사용됩니다. 2. 공개 메소드를 사용할 때 믹스인을 사용하면 코드 양을 줄이고 코드 재사용을 달성할 수 있습니다.
이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
Mixins는 재사용 가능한 메서드 또는 계산된 속성의 일부를 정의합니다. 믹스인에는 임의의 구성 요소 옵션이 포함될 수 있습니다. 구성 요소가 mixin 개체를 사용하면 mixin 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다.
Mixins에는 일반적으로 두 가지 용도가 있습니다.
1. 생성자를 작성한 후 임시 활동을 위한 메서드나 메서드를 추가해야 합니다. 이때 mixin을 사용하면 소스 코드 오염이 줄어듭니다.
2. 공용 메소드는 여러 곳에서 사용됩니다. 혼합 메소드를 사용하면 코드 양을 줄이고 코드 재사용을 달성할 수 있습니다.
Mixins의 기본 사용법
이제 디지털 클릭 증가 프로그램이 완성되었다고 가정하면 데이터가 변경될 때마다 "데이터 변경"이라는 메시지가 콘솔에 인쇄되기를 바랍니다.
코드 구현 과정:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option Demo</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div>
<script type="text/javascript">
//额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.num+".");
}
}
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
mixins:[addLog]//混入
})
</script>
</body>
</html>
mixin의 호출 순서
updated:function(){
console.log("构造器里的updated方法。")
}, 이때 콘솔 출력 순서는 다음과 같습니다. 업데이트된 메서드 생성자.
글로벌 API 믹스인 방식
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})PS: 전역 믹스인의 실행 순서는 믹스인 및 생성자의 메서드 이전입니다.
관련 권장 사항:더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문:
프로그래밍 입문! !
위 내용은 vue.js 믹스인이 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.