2018-08-12-Vue 구성 요소

어셈블리를 생성하는 3가지 방법

첫 번째:

두 번째:

세 번째:

요약:

어셈블리에서 명령을 사용합니다.

부모 구성 요소가 서브 구성 요소에 값을 전달하는 방법

  return{
      mySonName:' '
  }

  son:{
      props:['myName'],
      template:'...{{myName}}'
  }

서브어셈블리가 부모 어셈블리에 값을 전달하는 방법

  Vue.component('father',{
      template:'

      
 {{mySonName}}
      
      
',
      data(){
          return {
              mySonName:'???'
          }
      },
      methods:{
          getMySonName(data){
              console.log(data);
              this.mySonName = data;

          }
      },
      components: {
          son:{
              data(){
                 return {
                  myName :' '
                 }
              },
              template:' {{myName}}',
              // methods this.$emit() ;
              //$emit() 2 ; 1: , 2: ; :this.name
              methods:{
                  emitMyname(){
                      this.$emit('tellFatherMyname',this.myName)
                  }
              }
              
          }
      }
  })
  var vm = new Vue({
      el:'#app',
      data:{

      }
  })

형제 어셈블리의 생성 및 전송 값:

• 형제 구성을 만들 때 부모 구성 요소를 만들고 서브 구성 요소에서son 구성 요소와 daughter 구성 요소를 만듭니다.

• 다음은son 모듈과daughter 모듈 사이의 전송값입니다.

• dau --> son 전송치

• dau에서 이벤트 버스를 통해 이벤트 이름과 전달할 데이터를 먼저 발사하기;이벤트 bus.$emit (이벤트 이름, 데이터)

  
  
  • 이벤트 버스:
    var eventbus = new Vue();
  
  

• son에 갈고리 함수를 먼저 쓰고 이벤트bus.$('사건명칭', 데이터=>{}) 방법으로 형제 노드에서 발사된 사건을 감청하고 수신

• $on()에는 두 개의 파라미터가 있는데 파라미터1: 이벤트 이름;매개 변수2: 함수, 함수의 기본값은 전달된 데이터

• 코드는 다음과 같다:

  
  

  • 
    

    
    

      //先创建一个vue空实例,作为事件总线
      var eventbus = new Vue();
      
      Vue.component('father',{
      
          //组件显示的模板
          template:`
    
                      
                      
                  
    `,
         components: {
             son:{
                 data(){
                    return {
                      mySisterName:'???'
                    }
                 },
                 //组件显示的模板
                 template:'
    我的妹妹告诉我她叫{{mySisterName}}
    ',
                 //采用钩子函数
                 //在钩子函数中通过eventbus.$on('同一个事件名称',data)来接收传递过来的数据
                 mounted(){
                     eventbus.$on('tellBroMyName',data=>{
                         this.mySisterName = data;
                     })
    
                 }
              },
             daughter:{
                 data(){
                   return {
                      myName:'兰兰'
                   }
                 },
                 template:'点击就告诉哥哥我叫{{myName}}',
                 methods:{
                     //只要点击按钮,就将事件和数据一起传递过去
                     emitMyName(){
                         eventbus.$emit('tellBroMyName',this.myName)
                     }
                 }
             }
         }
      })
      var vm = new Vue({
          el:'#app',
          data:{
    
          }
      })