<六>元件的相關屬性

阿新 • • 發佈：2021-12-11

1、is屬性：通過is動態繫結元件名稱，可以動態切換顯示的元件

<body>
      <div id="app">
        <button @click='changeName'>更改名稱</button>
        <component :is='name'></component>
      </div>
    </div>
    
    <script src="vue.js"></script>
    <script>
      Vue.component( 
'name1',{
          template:`
          <div>
              name1
          </div>
          `
      });
      Vue.component('name2',{
          template:`
          <div>
             name2
          </div>
          `
      })
      var vm = new Vue({
        el: '#app',
        data: {
          name: 
'name2'
        },
        methods: {
          changeName: function() {
              this.name = this.name === 'name1'?'name2':'name1';
          }
        }
      })
  </script>

2、keep-alive標籤：被keep-alive元素包裹的元件會被快取，快取之後元件重新渲染時會直接從快取中獲取，避免了每次元件都重新渲染

我們將上面的例子改一下，在元件渲染的時候加上log記錄一下

<body>
      <div id=" 
app">
        <button @click='changeName'>更改名稱</button>
        <keep-alive>
          <component :is='name'></component>
       </keep-alive>
      </div>
    </div>
    
    <script src="vue.js"></script>
    <script>
      Vue.component('name1',{
          template:`
          <div>
              name1
          </div>
          `,
          created: function(){
            console.log('name1')//多次渲染則多次輸出
          }
      });
      Vue.component('name2',{
          template:`
          <div>
             name2
          </div>
          `,
          created: function(){
            console.log('name2')// 多次渲染則多次輸出
          }
      })
      var vm = new Vue({
        el: '#app',
        data: {
          name:'name2'
        },
        methods: {
          changeName: function() {
              this.name = this.name === 'name1'?'name2':'name1';
          }
        }
      })
  </script>

結果：點選多次按鈕，log只輸出一次即可證明，元件只渲染了一次

3、refs屬性：js獲取dom元素的時候，都是使用document.getelementbyid("xx")這種獲取，vue提供了這個屬性，獲取dom元素，這樣就可以根據這個屬性進行修改dom樣式了。

    <body>
      <div id="app">
        <button @click='changeName'>更改名稱</button>
        <div ref='demo'></div>
      </div>
    </div>
    
    <script src="vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {  
          name:'name1'      
        },
        methods: {
          changeName: function() {
             this.$refs.demo.innerText=this.name;         
          }
        }
      })
  </script>

ref也可以用來獲取元件的物件。

  <body>
      <div id="app">
        <button @click='changeName'>更改名稱</button>     
        <name1 ref='demo'>  </name1>
        
      </div>
    </div>
    
    <script src="vue.js"></script>
    <script>
      Vue.component('name1',{
          template:`
          <div>
              name1
          </div>
          `,
          data:function(){return {msg:'name1'}},     
      });
      
      var vm = new Vue({
        el: '#app',
        data: {
          
        },
       // component:{child:name1}
       // ,
        methods: {
          changeName: function() {
              alert(this.$refs.demo.msg);
          }
        }
      })
  </script>