предисловие
Привет всем, я снова здесь, чтобы продолжить нашу тему миксинов Vue на прошлой неделе.После нескольких дней исследований я обнаружил, что миксины Vue не могут заменить глобальное управление состоянием Vuex или параметры передачи eventvue.Сначала прочтите следующее объяснение.
Говоря о миксинах Vue
Лично я понимаю, что миксины — это определение некоторых публичных методов или вычисляемых свойств, а затем их смешивание с различными компонентами для удобства управления и унифицированной модификации.
Сказав так много, я думаю, что всем должно быть интересно узнать, что такое миксины Vue.Не волнуйтесь, давайте посмотрим, что теперь говорит официальный сайт Vue.
Talent.v ue js.org/v2/expensive/m…Миксины — это очень гибкий способ распространения повторно используемой функциональности в компонентах Vue. Объекты Mixin могут содержать произвольные параметры компонента. Когда компонент использует миксин, все параметры миксина будут смешаны с собственными параметрами компонента.
Из приведенного выше объяснения мы можем узнать, что миксины Vue — это метод микширования.После микширования он будет объединен с компонентами, чтобы сформировать новый компонент, и когда метод в нем будет переименован, он перезапишет текущий метод, поэтому будьте осторожны при именовании, хорошо. Давайте узнаем, как использовать миксины Vue в реальном бою, как мы это делали раньше.
Прежде всего, сначала смоделируйте среду для реальных боевых действий. Самый простой состоит в том, что каждый обычно использует пулевую коробку. Я считаю, что все не будут незнакомы с ним. Тогда я возьму в себя пулевую коробку в качестве примера и напишем пример из пулевой коробки появляется.
Первый шаг в создании mixins.js, который пишет
export default {
data() {
return {
//两个参数控制弹框和遮罩层
this_pop-up:false,
this_shade:false
}
},
created() {
},
mounted() {},
methods: {
pop-up:function(){
this.this_pop-up=true;
this.this_shade=true;
},
pop-up_close:function(){
this.this_pop-up=false;
this.this_shade=false;
}
}
}
Выше показано всплывающее окно и скрытие всплывающего окна, которое мне нужно.Если вы хотите добавить небольшой эффект движения, я могу оставить его здесь.
После этого вводится mixins.js, затем создаем файл a.vue
<button v-on:click="pop-up()">点我弹框显示</button>
<div class="shade" v-show="this_shade"></div>
<div class="prpo_up" v-show="this_pop-up">
<input type="submit" value="关闭">
</div>
import mixins from './mixins.js'
export default {
name: 'personalcenter',
data:function(){
return {
}
}，
mixins[mixins]
}
.shade{
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: #000;
opacity: 0.3;
z-index: 100;
}
.prpo_up{
position: fixed;
z-index: 2000;
width: 200px;
height: 448px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
pointer-events: auto;
border-radius: 4px;
background-color: #fff;
}
.prpo_up input{
font-size: 12px;
position: absolute;
left: 40px;
bottom: 75px;
width: 332px;
height: 42px;
color: #fff;
text-align: center;
line-height: 42px;
border-radius: 2px;
background: #3F79FF;
outline: none;
cursor: pointer;
border: 0;
}
Это завершает вызов, но этот метод не инкапсулирован как глобальный метод, и на него можно ссылаться только при импорте. Основной темой здесь является использование миксинов Vue, поэтому глобальной ссылки нет.
Что следует отметить при работе с миксинами Vue
Поговорим о моментах, на которые необходимо обратить внимание при использовании миксинов Vue.Прежде всего, вы должны понимать, что при использовании миксинов Vue методы и параметры не являются общими, методы и параметры не используются совместно, а методы и параметры не общий. Трижды не думайте, что метод метода возможен. После моего фактического измерения это действительно невозможно. Например, когда a.vue и b.vue вызывают один и тот же метод в одно и то же время, методы и свойства с обеих сторон не интероперабельны.Грубо говоря, Vue mixins Это дополнение.Он действует как функция управления компонентом,но фактически участвует в способе передачи данных.Грубо говоря,его можно использовать как заглушку -in или компонент, но когда дело доходит до данных, вам все равно придется передавать и записывать их самостоятельно. Выше это то, что я хочу сказать в этом выпуске, но я все же рекомендую вам узнать о миксинах Vue, спасибо.