is和ref

is

作用:解决标签的固定搭配问题

<template>
  <div>
    <ul>
      <li is="v-one"></li>
    </ul>
  </div>
</template>

<script>
import vOne from './one.vue'
export default {
  components:{
    vOne,
  }
}
</script>

<style>

</style>

2.动态组件(使用动画)

1.安装animate.css

cnpm i animate.css --save

2.引入css文件

在main.js引入
import 'animate.css'

3.使用

<transition enter-active-class="animate__animated animate__fadeInDown"

         >
         <li :is="comName"></li>
 </transition>

3.scoped

scoped:局部作用域

<style scoped>
.pink{
  background: yellow;
  color: blue;
  height: 40px;
  line-height: 40px;
}
</style>

4.ref

ref被用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs上。如果是普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向子组件的实例。

• ref操作普通DOM元素

<template>
  <div>
    <h1>ref使用</h1>
    <button @click="change('orange')">变橘</button>
    <!-- ref属性操作dom元素 -->
    <div class="green" ref="myDiv"></div>
  </div>
</template>

<script>
export default {
  methods:{
    change(color){
      // console.log(this.$refs.myDiv);
      this.$refs.myDiv.style.background =color;
    }
  }
}
</script>

<style>
.green{
  background: greenyellow;
  width:100px;
  height: 100px;
}
</style>

• ref操作子组件
  • 通过ref操作子组件的数据和方法

<template>
  <div>
    <h1>ref使用</h1>
    <button @click="change('orange')">变橘</button>
    <!-- ref操作子组件 -->
    <button @click="send">发送</button>
    <v-child ref="myChild"></v-child>
  </div>
</template>

<script>
import vChild from './child.vue'
export default {
  methods:{
    send(){
      // console.log(this.$refs.myChild);
      // console.log(this.$refs.myChild.name);
      this.$refs.myChild.fn()
    }
  },
  components:{
    vChild,
  }
}
</script>

<style>
.green{
  background: greenyellow;
  width:100px;
  height: 100px;
}
</style>