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 중국어 웹사이트의 기타 관련 기사를 참조하세요!