Vue.js - Day4
부모 구성 요소 하위 구성 요소 로 값 전달

구성 요소 인 스 턴 스 정의 방식,주의:props속성 을 사용 하여 부모 구성 요소 가 전달 하 는 데 이 터 를 정의 해 야 합 니 다

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '         '
      },
      components: {
        son: {
          template: '<h1>      --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  

사용v-bind또는 명령 을 간소화 하여 데 이 터 를 하위 구성 요소 에 전달 합 니 다.

하위 구성 요소 부모 구성 요소 에 값 전달

원리:부모 구성 요 소 는 방법의 인용 을 하위 구성 요소 내부 에 전달 하고 하위 구성 요 소 는 내부 에서 부모 구성 요 소 를 호출 하여 전달 하 는 방법 과 동시에 부모 구성 요소 에 보 낼 데 이 터 를 호출 방법 으로 매개 변수 로 전달 합 니 다.

부모 구성 요 소 는 방법의 인용 을 하위 구성 요소 에 전달 합 니 다.그 중에서getMsg은 부모 구성 요소 에서methods정 의 된 방법 이름 입 니 다.func는 하위 구성 요소 가 전달 하 는 방법 이름

입 니 다.

하위 구성 요소 내 부 는this.$emit(' ', )방식 을 통 해 부모 구성 요소 의 방법 을 호출 하고 데 이 터 를 부모 구성 요소 에 전달 합 니 다

    
    

    
    
      <div>
        <input type="button" value="      " @click="sendMsg" />
      </div>
    
  

  
    //         
    Vue.component('son', {
      template: '#son', //     Id
      methods: {
        sendMsg() { //        
          this.$emit('func', 'OK'); //             ，         
        }
      }
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ //     ，   this.$emit()        ，      
          alert(val);
        }
      }
    });
  

구성 요소 에서 data 와 props 의 차이
리 뷰 목록 사례
목표:부자 구성 요소 간 전송 값 연습
요소 와 구성 요 소 를 가 져 오 려 면this.$refs을 사용 하 십시오.

  

    

      
      
      
       H1

      

      
      
    
  

  
    Vue.component('my-com', {
      template: '<h5>       </h5>',
      data() {
        return {
          name: '   '
        }
      }
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          //    this.$refs      
          console.log(this.$refs.myh1.innerText);
          //    this.$refs      
          console.log(this.$refs.mycom.name);
        }
      }
    });
  

경로 가 무엇 입 니까?

**백 엔 드 경로:**일반 사이트 의 경우 모든 하이퍼링크 는 URL 주소 이 고 모든 URL 주 소 는 서버 에 대응 하 는 자원 입 니 다.

**전단 경로:**단일 페이지 응용 프로그램 에 있어 URL 의 hash(\#번호)를 통 해 서로 다른 페이지 간 의 전환 을 실현 하 는 동시에 hash 는 한 가지 특징 이 있 습 니 다.HTTP 요청 에 hash 와 관련 된 내용 이 포함 되 지 않 습 니 다.따라서 단일 페이지 프로그램의 페이지 전환 은 주로 hash 로 이 루어 집 니 다.

단일 페이지 응용 프로그램 에서 hash 변 화 를 통 해 페이지 를 전환 하 는 방식 을 전단 경로(백 엔 드 경로 와 구별)라 고 합 니 다.

vue 에서 vue-router 사용 하기

vue-router 구성 요소 라 이브 러 리 가 져 오기:

router-link 구성 요 소 를 사용 하여 내 비게 이 션

일치 하 는 구성 요 소 를 표시 하기 위해 router-view 구성 요 소 를 사용 합 니 다

생 성 사용Vue.extend생 성 구성 요소

    // 4.1    Vue.extend        
    var login = Vue.extend({
      template: '
    
'
    });

    // 4.2    Vue.extend        
    var register = Vue.extend({
      template: '
    
'
    });

루트 루트 루트 실례 를 만 들 고 루트 속성 을 통 해 루트 일치 규칙 을 정의 합 니 다

// 5.        router   ，   routers            
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

라 우 터 속성 을 사용 하여 경로 규칙

을 사용 합 니 다.

// 6.    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      router: router //    router          
    });

tag 속성 을 사용 하여 router-link 렌 더 링 태그 형식 을 지정 합 니 다.
경로 재 설정
설정 경로 강조
경로 전환 효과 설정
경로 규칙 에서 매개 변 수 를 정의 합 니 다.

규칙 에서 매개 변 수 를 정의 합 니 다.

{ path: '/register/:id', component: register }

this.$route.params를 통 해 경로 의 인 자 를 얻 을 수 있 습 니 다.

var register = Vue.extend({
      template: '
     --- {{this.$route.params.id}}
'
    });

children속성 을 사용 하여 루트 삽입 실현

  

    Account

    
  

  
    //        
    const account = Vue.extend({
      template: `<div>
          account  
        <router-link to="/account/login">login</router-link> | 
        <router-link to="/account/register">register</router-link>
        <router-view></router-view>
      </div>`
    });

    //       login   
    const login = Vue.extend({
      template: '<div>    </div>'
    });

    //       register   
    const register = Vue.extend({
      template: '<div>    </div>'
    });

    //     
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/account/login' }, //    redirect        
        {
          path: '/account',
          component: account,
          children: [ //    children     ，        
            { path: 'login', component: login }, //   ，        ，    /    
            { path: 'register', component: register }
          ]
        }
      ]
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  

이름 보기 고전 레이아웃 구현

라벨 코드 구조:

JS 코드:

    var header = Vue.component('header', {
      template: '<div class="header">header</div>'
    });

    var sidebar = Vue.component('sidebar', {
      template: '<div class="sidebar">sidebar</div>'
    });

    var mainbox = Vue.component('mainbox', {
      template: '<div class="mainbox">mainbox</div>'
    });

    //       
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  

CSS 스타일:

watch속성의 사용
한 가지 문 제 를 고려 합 니 다. 와 두 텍스트 상자 의 내용 이 바 뀌 려 면 전체 이름 의 텍스트 상자 의 값 도 달라 집 니 다.(이전의 지식 으로 어떻게 실현 합 니까??)

감청data중 속성의 변화:

     +
     =
    {{fullName}}
  

  
    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { //          ，         
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  

감청 경로 대상 의 변화:

      
      

    
  

  
    var login = Vue.extend({
      template: '<h1>    </h1>'
    });

    var register = Vue.extend({
      template: '<h1>    </h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('      ');
          }
        }
      }
    });
  

computed속성 을 계산 하 는 사용

기본 값 은getter의 계산 속성 만 있 습 니 다.

     +
     =
    {{fullName}}
  

  
    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { //     ；   ：               data       ，                  ，     fullName   
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  

정의getter와setter의 계산 속성:

    
    
    
    

    {{fullName}}
  

  
    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  

watch,computed와methods의 대비

computed속성의 결 과 는 캐 시 됩 니 다.의존 하 는 응답 식 속성 변화 가 있어 야 다시 계산 할 수 있 습 니 다.주로 속성 으로 사용 하기;

methods방법 은 구체 적 인 조작 을 나타 내 고 주로 업무 논 리 를 쓴다.

watch한 대상,키 는 관찰 해 야 할 표현 식 이 고 값 은 대응 하 는 반전 함수 입 니 다.주로 특정한 데이터 의 변 화 를 감청 하여 구체 적 인 업무 논리 조작 을 한다.computed와methods의 결합 체 로 볼 수 있다.

관련 파일

URL 의 hash(우물 번호)