Эта статья взята из официального документа:
http://cn.vuejs.org/guide/components.html#props
Этот учебник представляет собой более подробный и более полный учебник, составленный редактором в сочетании с официальными документами, что особенно подходит для начинающих.
Реквизит Доставка данных
①scope Компонентных экземпляров:
Он изолирован и проще говоря, значения не разделяются между компонентами, даже если есть атрибут с таким же именем.
<div id = "app"> <dd> </add> <lel> </del> </div> <script> var vm = new Vue ({el: '#App', компоненты: {"Add": {Template: "<tutry> btn: {{btn}}} </cutton>", data: function () {btn: "123" {Template: "<Tood> btn: {{btn}} </button>", data: function () {return {btn: "456"}; </script>Результатом рендеринга является:
2 кнопки, первая имеет значение 123, а второе - 456 (хотя они оба BTN)
② Используйте реквизиты для привязки статических данных:
[1] Этот метод используется для прохождения строк, а значение записывается на пользовательском элементе родительского компонента.
【2】 Следующий пример не может передать значение в атрибуте данных родительского компонента
【3】 Он будет перезаписать значение того же имени в атрибуте данных шаблона.
Пример кода:
<div id = "app"> <add btn = "h"> </add> </div> <script> var vm = new Vue ({el: '#App', data: {h: "hello"}, компоненты: {"Добавить": {btn: [btn '], шаблон: "<tood> btn: {btn}? return {btn: "123"}; </script>В соответствии с этим методом написания стоимость BTN - H, а не 123 или привет.
【4】 Метод написания верблюда
Если интерполяция верблюда,
В теге HTML, поскольку характеристики HTML нечувствительны (например, LI и LI одинаковы), значения, которые должны быть переданы в теге HTML, должны быть записаны в виде короткой горизонтальной линии (например, BTN-тест), чтобы быть чувствительными к случаям.
В массиве реквизитов это должно соответствовать интерполяции и написано как верблюд (например, Btntest).
Например:
Реквизит: ['btntest'], шаблон: "<tutry> btn: {{btntest}} </button>",Правильное письмо:
<добавить btn-test = "h"> </add>
Если интерполяция записана в коротком типе горизонтальной линии, или HTML -тег записана в стиле верблюда, она не вступает в силу нормально. (Если интерполяция не записана как верблюжь.
③ Динамические данные связывания с использованием реквизита:
Проще говоря, это сделать определенную интерполяцию дочернего компонента в соответствии с данными родительского компонента.
Стандартный способ написать это (с помощью v-bind):
<добавить v-bind: значение дочернего компонента = "свойства родительского компонента"> </add>
Как код
<div id = "app"> <add v-bind: btn = "h"> </add> </div> <script> var vm = new Vue ({el: '#App', data: {h: "hello"}, компоненты: {"Добавить": {props: ['btn'], Template: "<toolce> btn: {{btn"? () {return {'btn': "123"}; </script>иллюстрировать:
【1】 Значение H в данных родительских компонентов, используемых BTN;
【2】 возвращаемое значение в функции данных дочернего компонента перезаписано.
[3] Другими словами, используется значение родительского компонента (на основе имени атрибута), и значение метки используется в качестве строки.
【4】 Он все еще должен использовать реквизиты, в противном случае он будет использовать значение BTN в своих данных
④literal и динамический синтаксис:
[1] Проще говоря, если вы не добавляете v-bind, вы передаете буквальное количество, то есть вы рассматриваются как строка (например, 1 также строка, а не тип числа);
【2】 Добавить v-bind, выражение JS передается (так что значение родительского компонента может быть передано);
【3】 После добавления v-bind, если можно найти значение родительского компонента, то используется значение родительского компонента; Если нет соответствующего, он рассматривается как выражение JS (например, 1+2 рассматривается как 3, {a: 1} рассматривается как объект);
Как код:
<div id="app"> <add v-bind:btn="1+2"></add> </div> <script> var vm = new Vue({ el: '#app', data: { h: "hello" }, components: { "add": { props: ['btn'], template: "<button>btn:{{btn}}</button>" } }}); </script>Значение BTN здесь составляет 3 (а не 1+2 как строка без добавления V-bind)
⑤props Переплет тип:
[1] Проще говоря, он делится на два типа, а именно одностороннее связывание (родительский компонент может влиять на дочерний компонент, но обратное невозможно) и двустороннее привязка (дочерний компонент также может влиять на родительский компонент);
【2】 Пример привязки с односторонним движением: (по умолчанию или используйте .once)
<div id = "app"> родительский компонент: <input v-model = "val"> <br/> дочерний компонент: <test v-bind: test-val = "val"> </test> </div> <script> var vm = new Vue ({el: '#App', data: {val: 1}, компоненты: {"test": {props: v-model = 'testval'/> "}}}); </script>иллюстрировать:
Когда значение родительского компонента изменяется, значение дочернего компонента также изменяется;
Когда значение дочернего компонента изменяется, значение родительского компонента не изменится. Если значение родительского компонента снова изменяется, дочерний компонент снова будет синхронизирован.
Следует также отметить, что если дочерний компонент хочет быть связанным синхронно, входным входом дочернего компонента должен быть V-модель, а не атрибут значения (который может быть только для одного элемента, и связывание будет потеряно после изменения значения дочернего компонента)
【3】 Bi-Way Binding:
".sync" требуется в качестве модификатора
В качестве примера:
<div id = "app"> родительский компонент: <input v-model = "val"> <br/> дочерний компонент: <test: test.sync = "val"> </test> </div> <cript> var vm = new Vue ({el: '#App', data: {val: 1}, компоненты: {"test": {props: v-model = 'test'/> "}}}); </script>Влияние заключается в том, что независимо от того, какое значение вы измените, другое изменится соответственно.
【4】 Проведение реквизита:
Проще говоря, когда компонент получает данные, он используется для проверки, и он будет использоваться только в случае соответствующих условий.
Метод написания состоит в том, чтобы превратить реквизиты в объект, подтверждаемое значение является ключом объекта, а условие проверки - это значение, соответствующее ключу.
Например:
Реквизит: {test: {twoway: true}},Убедитесь, что тестовая переменная является двусторонней границей, а если это не так, будет сообщена ошибка. (Обратите внимание, что это не может быть использовано для проверки одностороннего привязки).
Пример кода заключается в следующем:
<div id = "app"> родительский компонент: <input v-model = "val"> <br/> дочерний компонент: <test: test = "val"> </test> </div> <cript> var vm = new vue v-model = 'test'/> "}}}); </script>
Для получения дополнительных типов проверки см. Официальный учебник:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
Выше приведено подробное объяснение объема компонентов и примеров передачи данных репута о девятой статье Vuejs, представленной вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!