优化 iconfont字体图标用法和使用 sync修饰符（优化：父子组件通信）

╰+哭是因爲堅強的太久メ 2023-02-25 10:21 1阅读 0赞

## vue功能：优化iconfont字体图标 ##

> 方法：
> 
> 第一步：将选择好的字体图标，添加项目。
> 
> 第二步：然后点击`更多操作`，选择`编辑项目`
> 
> 第三步：修改`FontClass/Symbol`前缀 和 `Font Family`，统一修改为：`vh-icon-`
> 
> 第四步：将字体图标文件，复制粘贴到项目`iconfont.css`
> 
> 将初始的`iconfont`类改为了\[class\*=‘vh-icon-’\]，当类名中有one-icon时使用，如下
> 
>     /* 其中 class*= 表示包含 [class*='vh-icon-']：表示只要类别包含 vh-icon- ，就使用 [class*='vh-icon-'] 里面的样式 而字体图标类名：vh-icon-chahao ，里面包含 vh-icon- 从而实现：只使用字体图标自身的类名，就可以了。 优化后：不再需要这样的写法 class="iconfont 字体图标类名" */
>     
>     [class*='vh-icon-'] { 
>       font-family: "vh-icon-" !important;
>       font-size: 16px;
>       font-style: normal;
>       -webkit-font-smoothing: antialiased;
>       -moz-osx-font-smoothing: grayscale;
>     }
>     
>     .vh-icon-chahao:before { 
>       content: "\e644";
>     }

## vue功能：sync修饰符（优化：子组件修改父组件的数据） ##

> 自定义子组件 demo.vue

<template>
      <div class="demo2">
        <button @click="changeNum">改变金额</button>
        <div>{
       {money}}</div>
      </div>
    </template>
    
    <script type="text/javascript">
    export default {
      data () {
        return {
    
        }
      },
      props: {
        money: null
      },
      methods: {
        changeNum () {
        // 冒号后面不能有空格   update:money
          this.$emit('update:money', 200)
          this.$emit('update:visible', true)
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    </style>

> 父组件：test.vue
> 
> sync语法糖使用：`:money.sync="money"`
> 
> `:字段="字段"`，就 `@update:字段`
> 
>  *  条件1：父组件向子组件动态传递数据 `:money="money"`
>  *  条件2：子组件向父组件触发事件是 `@update:money`
> 
> 子组件改变父组件的值：目前有2种方法
> 
> 方式一：使用语法糖：sync
> 
>     <one-demo :money.sync="money" :visible.sync="visible"></one-demo>
> 
> 方式二：父子组件通信
> 
>     <one-demo :visible="visible" :money="money" @update:money="fn"></one-demo>
>     
>     <script>
>     methods: {
>     	fn (value) {
>           console.log('数值', value)
>           this.money = value
>         }
>     }
>     <script>

<template>
      <div id="test">
        <div class="row">
          <one-demo :money.sync="money" :visible.sync="visible"></one-demo>
        </div>
      </div>
    </template>
    
    <script>
    // 引入组件
    import oneDemo from './components/demo.vue'
    export default {
      name: 'App',
      components: {
        oneDemo
      },
      data () {
        return {
          visible: false,
          money: 100
        }
      },
      methods: {
       	
      }
    }
    </script>
    
    <style lang="scss">
    
    </style>