Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2020, 09:57
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Vue использование свойств
Набросал код компонента:
const MyComponent= {
    template:'<div class="movable" v-bind:style="{left: left+\'px\', top: top + \'px\', borderColor: color}">'
			+ '{{text}}<br> <span class="counter">Счетчик: {{counter}} <button v-on:click="counter++">+1</button></span><br>'
			+ '<button v-on:click="move(\'left\', 0)">&lArr;</button>'
			+ '<button v-on:click="move(\'left\', 1)">&rArr;</button>'
			+ '<button v-on:click="move(\'top\',  0)">&uArr;</button>'
			+ '<button v-on:click="move(\'top\',  1)">&dArr;</button>'
			+'</div>',
    props:['text', 'color', 'propleft', 'proptop'],
    data() {
      return {
                counter: 0,
		left:0,
		top: 0
      }
    },
	created: function(){
		this.left = this.$props.propleft;
		this.top = this.$props.proptop;
		
	},
	methods: {
		move: function(where, isAdd) {
			let add = isAdd ? 10 : -10;
			this[where] = (+this[where] + add);
			console.log(this.propleft);
			console.log(this.left);
			//this.propleft+=10; // ошибка
		}
	}
  };


Вот в работе

Смотрю что в компоненте я не могу менять свои св-ва:
//this.propleft+=10; // ошибка

Поэтому исхитрился сделать как в коде выше.
Следующие вопросы:
1) вот так что ли эти св-ва и понимать, не как "св-ва компонента"(св-ва объекта) а как неизменяемые данные переданные компоненту
2) инициализировать ими свои внутренние данные получается через хук created()?
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2020, 10:32
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

3) А наблюдение за изменениями св-в нет?
Просто если входной параметр привязываешь к переменной снаружи и хочешь отследить ее изменение, то
так не работает:
watch: {
		propleft: function(newVal, oldVal) { 
			this.left = newVal;
		},
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2020, 11:51
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от micscr
//this.propleft+=10; // ошибка
this.propleft — это строка, которая взята из атрибута. Например, если в атрибуте написано "100", то после вашего «сложения» получается "10010".

Сообщение от micscr
1) вот так что ли эти св-ва и понимать, не как "св-ва компонента"(св-ва объекта) а как неизменяемые данные переданные компоненту
Свойства (props), данные (data), вычисляемые свойства и методы в конечном счёте оказываются свойствами (геттеры и сеттеры) экземпляра класса Vue — куда могут также включаться «хуки» жизненного цикла, когда компонент объявлен как класс. Как и в любом другом классе, их имена могут конфликтовать.

Сообщение от micscr
2) инициализировать ими свои внутренние данные получается через хук created()?
Если вам не нужно преобразование значении атрибутов, то такой шаг не обязателен. Однако у вас this.left и this.top получают строковые значения, а вы с ними хотите работать как с числами — соответственно такой шаг в данном примере нужен. (преобразование к числу)

Сообщение от micscr
3) А наблюдение за изменениями св-в нет?
Просто если входной параметр привязываешь к переменной снаружи и хочешь отследить ее изменение, то
так не работает:
Вы можете назвать соответствующие атрибуты также как и имена свойств, тогда не будет повторяющихся данных, которые нужно будет синхронизировать.

https://codepen.io/Malleys/pen/wvKMNRv
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2020, 13:44
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Сообщение от Malleys Посмотреть сообщение
Вы можете назвать соответствующие атрибуты также как и имена свойств, тогда не будет повторяющихся данных, которые нужно будет синхронизировать.
У меня такой вариант кучу варнингов в консоль кидает:
Цитата:
The data property "top" is already declared as a prop. Use prop default value instead
Цитата:
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "top"
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2020, 14:55
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от micscr
У меня такой вариант кучу варнингов в консоль кидает:
Возможно вы используете старый Vue, в котором встречаются такие проблемы. Пример, который я приводил, использует Vue 2.6.11.
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2020, 15:13
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

У меня тоже 2.6.11, запускаю локально.

Я смотрю что наблюдать изменение св-ва - вроде нет такого функционала.
Вот странненько если честно.
Забиндить какое то св-во на наружные данные, так пожалуйста:
<movable-component text="Eagle" v-bind:propleft="myGlobalLeft" proptop="400" color="Blue"></movable-component>

и в консоли через app.myGlobalLeft можно будет менять то что внутри у компонента, но компонент об этих изменениях не в курсе.
Ответить с цитированием
  #7 (permalink)  
Старый 17.04.2020, 13:31
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Сообщение от micscr Посмотреть сообщение
Я смотрю что наблюдать изменение св-ва - вроде нет такого функционала.
Придумал как это можно сделать:
1) Создается вычисляемое св-во следящее за входным параметром:
computed: {
		forpropleft() {
			return this.propleft;
		}
	},

2) Наблюдение делается уже за этим вычисляемым полем
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Локальное подключение компонентов vue? Lodas Библиотеки/Тулкиты/Фреймворки 0 11.04.2020 22:42
Vue + Axios + PHP + MySQL Volun Библиотеки/Тулкиты/Фреймворки 13 03.04.2019 18:50
UI верстальщик. VUE + Semantic UI shelomar Работа 0 12.01.2018 15:40
JavaScript. Уровень 3в. Серверное программирование на Node.js maxy666 Node.JS 8 10.08.2014 00:36
динамическое обновление свойств объекта в цикле grego Общие вопросы Javascript 3 04.12.2013 23:29