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

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>