vue3-常用

vue动态添加style样式

对象
:style="{ color: activeColor, fontSize: fontSize + 'px' }"

数组
:style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]

三目
:style="{color:(index==0?conFontColor:'#000')}"

class

https://www.cnblogs.com/lwming/p/10925318.html

对象
:class="{'p1' : true}"

数组
:class="[{'p1': false}, 'p2']"

三目
:class="[ 1 < 2 ? 'p1' : 'p' ]"

vue3的emit($emit, emits-options)

子组件

<template>
  <div>
    <button @click="clickBtn" class="btn-item">hi~</button>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
  setup (props, ctx) {
    const clickBtn = () => {
      ctx.emit("on-change", "hi~");
    };
    return { clickBtn}
  }
})
</script>

父组件

<template>
  <div>
    <emit-child @on-change="emitFn" />
  </div>
</template>

vue2 emit

<template>
<div>
  <button @click="onEmit"> 子组件透传事件 </button>
</div>
</template>
<script>
export default {
  methods: {
    onEmit() {
      this.$emit("on-change", "hi~");
    }
  }
}
</script>

父组件
<template>
<div>
  < child @on-change="onChildChange" />
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
  components: {
    Child
  },
  methods: {
    onChildChange(v) {
      console.log(v); // hi~
    }
  }
}
</script>