特殊特性(key、ref、is)
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:结合keep-alive,可以做tab切换缓存
// 使用`: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>