初学vue

1. 原理：v-model本质上是一个语法糖。例如在应用在输入框上，就是value属性和input事件的合写。
2. 作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素的内容 ①数据变化→视图自动更新 ②视图变化→数据自动更新
3. 语法：v-model="变量名字"

$注意$：$event用于在模板中，获取事件的形参

  <div id="app">
    <!-- 1.父组件使用响应式数据绑定v-model -->
    <HelloWorld
    v-model="msg"
    ></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
 data(){
  return {
    msg:'102'
  }
 },
 components:{
  HelloWorld
 }
}
</script>

<template>
  <div>
    <select :value="value" @change="handleChange">
      <option value="102">102</option>
      <option value="103">103</option>
      <option value="104">104</option>
      <option value="105">105</option>
    </select>
  </div>
</template>

<script>
export default {
  //2.子组件绑定元素必须用vlaue绑定 
  props:{
    value:{
      type:String
    }
  },
  methods:{
      handleChange(e){
        // 3.子组件事件名必须命名为input
        this.$emit('input',e.target.value)
      }
    }
}
</script>

如果父组件中使用v-model绑定数据，那么子组件绑定元素必须用value绑定而且子组件事件名必须命名为input

this.$emit('input',e.target.value)

1. 默认插槽 作用：让组件内部的一些结构支持自定义

    <MyDIalong>
    <!-- 在使用组件时，组件标签内填入内容 -->
    你确定要删除吗？
    </MyDIalong>

<div class="dislog">
    <div class="dislog-header">
    <h3>友情提示</h3>
    <span class="close">x</span>
    </div>
    <div class="dislog-content">
    <!-- 1.在需要定制的位置，使用slot占位 -->
    <slot></slot>
    </div>
    <div class="dislog-footer">
        <button>取消</button>
        <button>确定</button>
    </div>
</div>

2. 后备内容

    <MyDIalong>
    你确定要删除吗？
    </MyDIalong>

<div class="dislog">
    <div class="dislog-header">
    <h3>友情提示</h3>
    <span class="close">x</span>
    </div>
    <div class="dislog-content">
    <!-- 往slot标签中，填入默认文本内容 -->
    <slot>我是默认文本内容</slot>
    </div>
    <div class="dislog-footer">
        <button>取消</button>
        <button>确定</button>
    </div>
</div>

3. 具名插槽

    <!-- v-slot:head可以简写成#head -->
    <MyDIalong v-slot:head>
    你确定要删除吗？
    </MyDIalong>

<div class="dislog">
    <div class="dislog-header">
    <h3>友情提示</h3>
    <span class="close">x</span>
    </div>
    <div class="dislog-content">
    <!-- 给slot添加name属性 -->
    <slot name="head">我是默认文本内容</slot>
    </div>
    <div class="dislog-footer">
        <button>取消</button>
        <button>确定</button>
    </div>
</div>

4. 作用域插槽： 定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。

      <HelloWorld :data="list">
      <!-- 通过template #插槽名="变量名" 接收 -->
      <template #default="obj">
        <button @click="del(obj.row.id)">
          删除
        </button>
      </template>
    </HelloWorld>

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in data" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>
            <!-- 1.给slot标签，添加属性的方式传值 -->
           <slot :row="item" msg="测试文本"></slot>
           <!-- 2.将所有的属性，添加到一个对象中 -->
           <!-- {
            row:{ id:item.id,name:item.name,age:item.age}
            msg:"测试文本"
           } -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props:{
    data:Array
  }
}
</script>