vue中的observe 依赖注入provide inject element 中icon添加点击事件

1.类似于微型的vuex，vue.observe
2.之前子代向祖父代传值是一直emit，其实可以使用 provide inject来传值。
父组件中：

    provide() {
    return {
      xprop: this.xprop
    };
  },
  methods:{
    xprop(e){
      console.log(e);
    }
  }
子组件中:
  inject:['xprop'],
  methods:{
    add(){
      this.xprop('我是孙子')
    }
  }

在我们需要注入别名时，会采用下面这种方式

export default {
  inject: {
    /* 本地属性名 */ localMessage: {
      from: /* 注入来源名 */ 'message'
    }
  }
}

如果注入没有父组件提供，会有警告，如果我们有不需要父组件提供的情况，需要给一个默认值

export default {
  // 当声明注入的默认值时
  // 必须使用对象形式
  inject: {
    message: {
      from: 'message', // 当与原注入名同名时，这个属性是可选的
      default: 'default value'
    },
    user: {
      // 对于非基础类型数据，如果创建开销比较大，或是需要确保每个组件实例
      // 需要独立数据的，请使用工厂函数
      default: () => ({ name: 'John' })
    }
  }
}

为保证注入方和供给方之间的响应性链接，我们需要使用 computed() 函数提供一个计算属性
import { computed } from ‘vue’

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    return {
      // 显式提供一个计算属性
      message: computed(() => this.message)
    }
  }
}

避免别名冲突可以使用 Symbol 作注入名
Symbol() 唯一的，独一无二的基本数据类型
3. element 中icon添加点击事件

<el-input>
      <i slot="suffix" class="el-icon-search" @click=""></i>
    </el-input>

xixi