vue-----

一.el-select 中 option 获取 value 和 label

1.添加change 事件 <el-select @change=“getTypeLable”>
2. 获取label

   getTypeName(val) {
   
      let obj = {
   }
      obj = this.entTypeList.find(item => {
   
        return item.value === val
      })
      this.$set(this.companyInfo, 'typeName', obj.name)
    }

二.组件传值:在TodoList组件中使用子组件TodoItem

1.父组件向子组件传值: 父组件通过属性的形式向子组件传值

2.子组件接收值: 子组件中要在script的export default里的props里面对接收的数据进行一个定义,例如子组件要接收content这个数据,就要在子组件的props里声明对content的使用,声明好之后,就可以直接在子组件的template中使用content

3.子组件和父组件通信: 调用this.$emit()方法,向外触发一些事件,将事件名字和下标写在参数里带到父组件中去,事件名是自己定义的

Demo2:在Demo1的基础上,点击列表项,则将此列删除

删除:把index也传给子组件,当子组件被点击时,执行子组件的handleDelete方法,在这里和父组件通信,告诉父组件我要被删除了,将父组件带来的下标传回给父组件
子组件触发了事件出去,父组件就需要在创建子组件的时候,监听这个事件
@delete=“handleDelete”,意思是一旦监听到delete事件被触发,就会执行handleDelete这个方法 ,删除当前行list即可

首先点击的是子组件—> 子组件需要向父组件传值 ----->父组件定义事件名监听

'TodoItem组件' 子组件
<template>
 <li @click="handleDelete">{
   {
   content}}</li>
</template>

<script> 
export default {
   
 props: ['content', 'index'], //子组件接收父组件传来得值
 methods: {
   
     handleDelete() {
   
         this.$emit('delete', this.index)  //向父组件传事件名和下标
     }
 }
};
</script>


'TodoList组件'  父组件
<template>
  <div>
    <input v-model="inputValue"/>
    <button @click="handleSubmit">提交</button>
    <ul>
      <todo-item 
      v-for="(item, index) of list" 
      :key="index"