zoukankan      html  css  js  c++  java
  • <六>组件的相关属性

    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>
  • 相关阅读:
    两年来的读书小总结(20112013)
    给无边框窗体添加任务栏右键菜单
    使用 yum 命令安装本地安装QQ
    删除非空目录
    gcc安装
    WIN32::OLE操作之excel
    [题解] 组合数学13题
    [算法] 高斯消元及其应用
    [算法] Lucas 定理
    [算法] 最小费用最大流
  • 原文地址:https://www.cnblogs.com/choii/p/15638937.html
Copyright © 2011-2022 走看看