вя в $ рефов, $ испускает, $ сценариев использования

1. $ испускают сценарии использования

Вызов подузла родительского компонента и способ передачи данных

Примечание: Время подэлемент тега не чувствительны к регистру использование «-» отделенный

Подкомпоненты:

<Шаблон> 
  <Button @ замковое = " emitEvent " > Нажмите I </ Button> 
</ Template> 
<Script> 
  Экспорт по умолчанию { 
    Data () { 
      возвращение { 
        MSG: " сборочный узел I Data " 
      } 
    } 
    Методы: { 
      emitEvent () { 
        это . $ EMIT ( « мое-событие » , это .msg)
         // нажав кнопку события метод инициирующее и способ запуска обычая моего-событие с $ EMIT, 
передачи this.msg данных. 
      } 
    } 
  }
 </ SCRIPT>

Родитель компонент:

<Шаблон> 
  <DIV ID = " App " > 
    <Child-A @ my- Событие = " getMyEvent " > </ Child-A> 
    <! - производится методом мониторинга родительского компонента моего-события событие, а затем принять значение пройденного узла -> 
  </ DIV> 
</ Template> 
<Script> 
  Импорт childâ из  ' ./components/child.vue ' 
  Экспорт по умолчанию { 
    компонентов: { 
      childâ 
    } 
    Методы: { 
      getMyEvent (МВП) { 
          console.log ( ' полученные данные ---------> 'сообщ +) // данные , полученные ---------> I данные суб-сборки
      } 
    } 
  }
 </ SCRIPT>

2, используя $ исх сцена

Метод вызывает компонент подузел родительский, данные могут быть переданы

Примечание: Время подэлемент тега не чувствительны к регистру использование «-» отделенный

Родитель компонент:

<шаблон> 
  <DIV ID = " приложение " > 
    <ребенок-а исх = " ребенок " > </ ребенок-а> 
    <! -用исх给子组件起个名字-> 
    Кнопка <@ = нажмите " getMyEvent " >点击父组件</ кнопка> 
  </ DIV> 
</ шаблон> 
<скрипт> 
  импорт childâ из  ' ./components/child.vue ' 
  экспорта по умолчанию { 
    компонентов: { 
      childâ 
    }, 
    данных () { 
      возвращение { 
        MSG: "Я являюсь родителем компоненты данных " 
      }
    }
    Методы: { 
      getMyEvent () { 
          это $ refs.child.emitEvent (. Это .msg);
           // Подкомпоненты вызова метода, ребенок сверху исй из названия, emitEvent является методом подузлов. 
      } 
    } 
  }
 </ SCRIPT>

Подкомпоненты:

<Шаблон> 
  <Button> нажмите I </ Button> 
</ Template> 
<Script> 
  Экспорт по умолчанию { 
    Методы: { 
      emitEvent (МВП) { 
        console.log ( ' полученные данные ---------> ' + MSG) // полученные данные ---------> I компонент родительские данные 
      } 
    } 
  }
 </ SCRIPT>

3. $ по сценариям использования

Взаимная передача данных между братьями компонентов

• Во-первых, создать пустой экземпляр вю (мост между братьями)

  Импорт Вид из  « для » 
        экспорта по умолчанию  новый View ()

   

• подузлы childâ

<шаблон> 
    <DIV> 
        <SPAN> а组件-> {{MSG}} </ SPAN> 
        <входной тип = " кнопка " значение = " 把组件数据传给б " @ Щелкните = " отправить " > 
    </ дел > 
</ шаблон> 
<скрипт> 
импорт vmson из  " ../../../util/emptyVue " 
экспорта по умолчанию { 
    данных () { 
        возвращение { 
            тзд: { 
                а: ' 111 ' , 
                б: '222 ' 
            }
        }  
    },
    Методы: { 
        отправить: функция () { 
            . Vmson $ испускают ( " AEvent " , это .msg) 
        } 
    } 
}
 </ SCRIPT>

•       подузлы childb

Получатель по $ на прослушивание обратного вызова пользовательских событий получает данные

<Шаблон> 
 <DIV> 
    данные <SPAN> б компонент, проход -> {{MSG}} </ SPAN> 
 </ DIV> 
</ Шаблон> 
<Сценарий> 
      Импорт vmson из  " ../../ ../util/emptyVue " 
      Экспорт по умолчанию { 
         данных () { 
                возвращение { 
                    сбщ: " " 
                } 
            }, 
         навесные () { 
                . vmson $ ON ( " AEvent " , (Val) => { // прослушивать события AEvent, функция обратного вызова использовать функции со стрелками; 
                    console.log (Val); // распечатать результаты: Я компонент данных 
                    это .MSG = Val;
                }) 
          } 
    }
 </ SCRIPT>

• родитель компонент

<шаблон> 
     <DIV> 
      <childâ> </ childâ>     
      <br /> 
      <childb> </ childb>       
     </ DIV> 
</ шаблон> 
<скрипт> 
   импорт childâ из  ' ./childa.vue ' ; 
   импорт childb из  ' ./childb.vue ' ; 
   экспорта по умолчанию { 
       компоненты: { 
           childâ, 
           childb 
       }, 
       данные () { 
           возвращение { 
               сбщ: "" 
           } 
       },
           
</ Скрипт>