Vue 技巧

空的.vue 文件快速创建基础模板(选项API)

vbase  #回车后出现下方代码

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

Vue 在子组件中执行父组件中的方法

默认自动传递

#子组建 
const toastview = {
        propo:{
            close:{ type : Function },
        },
        template:`<div :click="close">按钮</div>` #此行不写:click="close" 也会执行父组建的方法
}

#父组建
const App = {
        components:{toastview},
        methods: {
            close(){
                console.log("Close");
            }
        }
        template:`<div id="#app" >   <toastview  @click="close" ></toastview>   </div>`
}

自定义绑定执行父组件方法

#子组建 
const toastview = {
        inheritAttrs:false, #禁用自动传到子组件触发
        propo:{
            close:{ type : Function },
        },
        template:`<div > <h2 v-bind="$attrs"></h2 </div>`
}

#父组建
const App = {
        components:{toastview},
        methods: {
            close(){
                console.log("Close");
            }
        }
        template:`<div id="#app" >   <toastview  @click="close" ></toastview>   </div>`
}

给子组建传值

#App.Vue
<template>
  <HelloWorld :name="uname" />
</template>

<script >
    import HelloWorld from './components/HelloWorld.vue'
    export default {
        components:{HelloWorld},
        data(){
            return{
                uname:'张三',
            }
        }
    }
</script>

<style scoped>

</style>

#HelloWorld.Vue
<template>
  <h1>{{ name }}</h1>
</template>

<script >
    export default{
        props:['name']
    }
</script>


<style scoped>
</style>

绑定class

:class="{astyle:name % 10 == 0}"

Vue + Vite + Vant 项目中用到懒加载的时候 需要导入组件

#main.js
import { createApp } from 'vue'

// import Vant from 'vant';
//导入LazyyLoad
import Vant, {Lazyload} from 'vant';
import 'vant/lib/index.css';

import './style.css'
import App from './App.vue'
// createApp(App).mount('#app')
const app = createApp(App);
app.use(Vant);
//注册
app.use(Lazyload);
app.mount('#app');

 

Vue 项目导入阿里巴巴字体库

#css 添加一下代码
@font-face {
    font-family: 'iconfont';
    src:
    url('./assets/fonts/iconfont.woff2') format('woff2'), /* chrome, firefox */
    url('./assets/fonts/iconfont.woff') format('woff'), /* chrome, firefox */
    url('./assets/fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    color:#fff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

#如何使用
<span class="iconfont">&#xe8c3;</span>

给子组件重新定义样式

获取子组件的类名 .tn-column-notice__swiper

在当前文件的 style 中加入 ::v-deep .tn-column-notice__swiper

如果不起作用加 !important 试试

::v-deep .tn-column-notice__swiper{
	height: 80rpx !important;
}