美文网首页
vue 知识点整理——特殊特性(key、ref、is)

vue 知识点整理——特殊特性(key、ref、is)

作者: alokka | 来源:发表于2019-03-05 15:10 被阅读0次

    key:

    有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
    
    最常见的用例是结合 v-for:
    
    <ul>
      <li v-for="item in items" :key="item.id">...</li>
    </ul>
    

    ref:

    // 使用 `this.$refs` 来获取元素和组件
      <div id="app">
        <div>
          <input type="button" value="获取元素内容" @click="getElement" />
          <!-- 使用 ref 获取元素 -->
          <h1 ref="myh1">这是一个大大的H1</h1>
    
          <hr>
          <!-- 使用 ref 获取子组件 -->
          <my-com ref="mycom"></my-com>
        </div>
      </div>
    
      <script>
        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);
            }
          }
        });
      </script>
    

    is:

    // 使用`:is`属性来切换不同的子组件,并添加切换动画
    1. 组件实例定义方式:
      // 登录组件
        const login = Vue.extend({
          template: `<div>
            <h3>登录组件</h3>
          </div>`
        });
        Vue.component('login', login);
    
        // 注册组件
        const register = Vue.extend({
          template: `<div>
            <h3>注册组件</h3>
          </div>`
        });
        Vue.component('register', register);
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: { comName: 'login' },
          methods: {}
        });
    
    2. 使用`component`标签,来引用组件,并通过`:is`属性来指定要加载的组件:
      <div id="app">
        <a href="#" @click.prevent="comName='login'">登录</a>
        <a href="#" @click.prevent="comName='register'">注册</a>
        <hr>
        <transition mode="out-in">
          <component :is="comName"></component>
        </transition>
      </div>
    

    相关文章

      网友评论

          本文标题:vue 知识点整理——特殊特性(key、ref、is)

          本文链接:https://www.haomeiwen.com/subject/fdqnuqtx.html