diff --git "a/18\345\210\230\344\272\216\350\217\262/20230403\347\224\237\345\221\275\345\221\250\346\234\237\350\260\203\347\224\250\346\226\271\346\263\225.md" "b/18\345\210\230\344\272\216\350\217\262/20230403\347\224\237\345\221\275\345\221\250\346\234\237\350\260\203\347\224\250\346\226\271\346\263\225.md"
new file mode 100644
index 0000000000000000000000000000000000000000..425b0193ba943f23403d69cf83f298a83766ec09
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230403\347\224\237\345\221\275\345\221\250\346\234\237\350\260\203\347\224\250\346\226\271\346\263\225.md"
@@ -0,0 +1,31 @@
+<script>
+//选择时响应
+export default{
+  data(){
+    return{
+      me:8888
+    }
+  },
+  methods:{
+    pcc(){
+      console.log(this.me)
+    }
+  },
+  mounted(){
+    this.pcc();
+  }
+}
+</script>
+
+<template>
+<div>
+  这个是：{{ me }} <input type="text" v-model="me">
+  <input type="button" @click="pcc" value="确定">
+</div>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230403\351\200\211\346\213\251\345\223\215\345\272\224.md" "b/18\345\210\230\344\272\216\350\217\262/20230403\351\200\211\346\213\251\345\223\215\345\272\224.md"
new file mode 100644
index 0000000000000000000000000000000000000000..230e3e30130f17445041b29983b5ca88459c0485
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230403\351\200\211\346\213\251\345\223\215\345\272\224.md"
@@ -0,0 +1,25 @@
+<script>
+//选择时响应
+export default{
+  data(){
+    return{
+      me:8888
+    }
+  },
+  mounted(){
+    console.log('hai');
+  }
+}
+</script>
+
+<template>
+<div>
+  这个是：{{ me }} <input type="text" v-model="me">
+</div>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
\ No newline at end of file
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230404\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md" "b/18\345\210\230\344\272\216\350\217\262/20230404\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5d8eeb5810d5c69c0f0a99456a341c978ca7016d
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230404\350\256\241\347\256\227\346\234\272\345\261\236\346\200\247.md"
@@ -0,0 +1,32 @@
+<script>
+ export default {
+  data(){
+    return{
+      author:{
+        name:'John Doe',
+        book:[
+          'dfgsdfdf',
+        ]
+      }
+    }
+  },
+  computed:{
+  publishedBookMessage(){
+    return this.author.book.length>0?'yes':'no'
+  }
+}
+}
+
+
+</script>
+
+<template>
+  <p>Has publishedBookMessage:</p>
+  <span>{{ author.book.length> 0 ? 'yes' : 'no' }}</span>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230406\346\235\241\344\273\266\346\270\262\346\237\223.md" "b/18\345\210\230\344\272\216\350\217\262/20230406\346\235\241\344\273\266\346\270\262\346\237\223.md"
new file mode 100644
index 0000000000000000000000000000000000000000..4e72a25e4bf89f952f16fbfc5aba24f90a95023c
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230406\346\235\241\344\273\266\346\270\262\346\237\223.md"
@@ -0,0 +1,36 @@
+<script>
+export default {
+  data() {
+  	return {
+	    awesome: true
+  	}
+	}
+}
+</script>
+
+<template>
+  <button @click="awesome = !awesome">toggle</button>
+
+	<h1 v-if="awesome">Vue is awesome!</h1>
+	<h1 v-else>Oh no 😢</h1>
+</template>
+
+------列表渲染
+
+
+<script>
+export default {
+  data() {
+  	return {
+	    parentMessage: 'Parent',
+    	items: [{ message: 'Foo' }, { message: 'Bar' }]
+  	}
+	}
+}
+</script>
+
+<template>
+	<li v-for="(item, index) in items">
+  	{{ parentMessage }} - {{ index }} - {{ item.message }}
+	</li>
+</template>
\ No newline at end of file
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230407\344\272\213\344\273\266\345\244\204\347\220\206.md" "b/18\345\210\230\344\272\216\350\217\262/20230407\344\272\213\344\273\266\345\244\204\347\220\206.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e22354e0ec485bfbd2f356895e9956cc18c86da7
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230407\344\272\213\344\273\266\345\244\204\347\220\206.md"
@@ -0,0 +1,23 @@
+<script>
+export default {
+  data() {
+    return {
+      name: 'Vue.js'
+    }
+  },
+  methods: {
+    greet(event) {
+      // `this` inside methods points to the current active instance
+      alert(`Hello ${this.name}!`)
+      // `event` is the native DOM event
+      if (event) {
+        alert(event.target.tagName)
+      }
+    }
+  }
+}
+</script>
+
+<template>
+	<button @click="greet">Greet</button>
+</template>
\ No newline at end of file
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230410\350\241\250\345\215\225\350\276\223\345\205\245.md" "b/18\345\210\230\344\272\216\350\217\262/20230410\350\241\250\345\215\225\350\276\223\345\205\245.md"
new file mode 100644
index 0000000000000000000000000000000000000000..29e89c21e9b619678f425c9e3f243b6a5db63864
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230410\350\241\250\345\215\225\350\276\223\345\205\245.md"
@@ -0,0 +1,85 @@
+<script>
+export default {
+  data() {
+    return {
+      stu: {
+      username:'哒哒',
+      age:12,
+      sex:'m',
+      hobby:['cc','ss'],
+      province:'sc'
+      }
+    }
+  },
+  methods: {
+    btnSave() {
+      console.log(this.stu.username);
+      console.log(this.stu.age)
+    }
+  }
+}
+
+</script>
+
+<template>
+  <div>
+  <form >
+    <table>
+      <tr>
+        <td><label for="">用户名</label></td>
+        <td><input type="text" v-model="stu.username"></td>
+      </tr>
+
+      <tr>
+        <td><label for="">年龄</label></td>
+        <td><input type="text" v-model="stu.age"></td>
+      </tr>
+
+       <tr>
+        <td><label for="">性别</label></td>
+        <td>
+          <input type="radio" name="abc" value="f" v-model="stu.sex">女
+          <input type="radio" name="abc" value="m" v-model="stu.sex">男
+        </td>
+      </tr>
+
+     <!-- ///复选 -->
+      <tr>
+        <td><label for="">爱好：</label></td>
+        <td>
+          <input type="checkbox" name="hobby" value="bb" v-model="stu.hobby">篮球
+          <input type="checkbox" name="hobby" value="fb" v-model="stu.hobby">跳绳
+          <input type="checkbox" name="hobby" value="ss" v-model="stu.hobby">吃饭
+          <input type="checkbox" name="hobby" value="cc" v-model="stu.hobby">睡觉
+          <input type="checkbox" name="hobby" value="zz" v-model="stu.hobby">吃饭饭
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <label for="">籍贯</label>
+        </td>
+
+        <td>
+          <select multiple v-model="stu.province">
+            <option value="fj">福建省</option>
+            <option value="sc">四川省</option>
+            <option value="bj">北京省</option>
+            <option value="gd">广东省</option>
+            <option value="sd">山东省</option>
+            <option value="jx">江西省</option>
+          </select>
+        </td>
+      </tr>
+      
+    </table>
+
+
+  </form>
+  <td><input type="button" value="提交" @click="btnSave"></td>
+ </div>
+ 
+</template>
+
+<style scoped>
+
+</style>
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230411\344\276\246\345\220\254\345\231\250.md" "b/18\345\210\230\344\272\216\350\217\262/20230411\344\276\246\345\220\254\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5ead0171b8f8e70005e209a46f4c9bba1d07520f
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230411\344\276\246\345\220\254\345\231\250.md"
@@ -0,0 +1,50 @@
+<script >
+  //ref用于简单数据类型的属性，rective用于复杂数据类型的属性，onMouted生命周期的新的形势，是一个函数
+import {ref,  reactive, onMounted,watch} from 'vue';
+
+const question=ref('');
+const answer =ref('');
+watch(question,async(newValue,oldValue)=>{
+  if(newValue,endsWith('?'))  {
+     console.log('问题有了！');
+
+     answer.value='正在使用查找'
+
+     axios.get('https://yesno.wtf/api').then(res =>{
+      console.log(res);
+      let data =res.data;
+      console.log(data);
+      console.log(data.answer);
+      answer.value=data.answer;
+
+      
+      console.log(answer);
+     })
+  }
+})
+
+</script>
+
+<template>
+  <div>
+    <!-- <form action="" @submit.prevent="formSubmit">
+      <input type="submit" value="提交">
+    </form> -->
+    <!-- <input type="text" v-model="nickname" > {{nickname}}
+    <input type="text" v-model="stu.name"> -->
+
+    <p>
+      问题：
+      <input type="text" v-model="question">
+    </p>
+    
+    <p>
+      回答如下：{{answer}}
+
+    </p>
+    <p>
+      <img src="" alt="">
+    </p>
+  </div>
+</template>
+
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230411\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/18\345\210\230\344\272\216\350\217\262/20230411\347\224\237\345\221\275\345\221\250\346\234\237.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2505144edc3df8ed99a4d377051a4ec836c6a13d
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230411\347\224\237\345\221\275\345\221\250\346\234\237.md"
@@ -0,0 +1,26 @@
+<script >
+export default {
+  data(){
+    return{
+      nickname:'nn'
+    }
+  },
+  methods:{
+    formSubmit(){
+      console.log('你快看看');
+    }
+  }
+}
+
+</script>
+
+<template>
+  <div>
+    <!-- <form action="" @submit.prevent="formSubmit">
+      <input type="submit" value="提交">
+    </form> -->
+    <input type="text" v-model="nickname" > {{nickname}}
+ 
+  </div>
+</template>
+
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230411\350\241\250\345\215\225\347\273\221\345\256\232.md" "b/18\345\210\230\344\272\216\350\217\262/20230411\350\241\250\345\215\225\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..2deb2fd7b45b914b3651789e9312c5ca920d2d26
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230411\350\241\250\345\215\225\347\273\221\345\256\232.md"
@@ -0,0 +1,23 @@
+<script >
+  //ref用于简单数据类型的属性，rective用于复杂数据类型的属性，onMouted生命周期的新的形势，是一个函数
+import { onMounted, reactive } from 'vue';
+onMounted(() =>{
+  console.log("撒方式");
+})
+
+let nickname=ref('项羽');
+let stu=reactive({
+  id:3,
+  name:shabby
+})
+</script>
+
+<template>
+  <div>
+    <!-- <form action="" @submit.prevent="formSubmit">
+      <input type="submit" value="提交">
+    </form> -->
+    <input type="text" v-model="nickname" > {{nickname}}
+    <input type="text" v-model="stu.name">
+  </div>
+</template>
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md.md" "b/18\345\210\230\344\272\216\350\217\262/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5d6bf2ab92606a80f54824b249e020fa58b8712e
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230413\346\250\241\346\235\277\345\274\225\347\224\250.md.md"
@@ -0,0 +1,234 @@
+一、模板引用
+虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。
+
+声明性渲染，
+关于声明性，前期遇到时已经做过简单介绍。而这边官方文档的语句再次暴露了声明性渲染的一些特点，即抽象了大部分对DOM的直接操作，简单讲就是我们只要指定模板挂载到哪里，而不需要直接在操作模板中各个元素的细节（因为这部分在底层或者说后台已经做好了）。
+
+要实现这一点，我们可以使用特殊的 ref attribute：
+
+<input ref="input">
+1
+ref 是一个特殊的attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个input元素上，或在一个元素上初始化一个第三方库。
+
+1.1. 访问模板引用
+挂载结束后引用都会暴露在 this.$refs 之上：
+
+<script>
+export default {
+	mounted() {
+		this.$refs.input.focus()
+	}
+}
+</script>
+
+<template>
+	<input ref="input" />
+</template>
+
+注意，你只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 $refs.input ，在初次渲染时会是 null 。这是因为在初次渲染前这个元素还不存在！
+
+1.2. v-for 中的模板引用
+当在 v-for 中使用模板引用时，相应的引用中包含的值是一个数组：
+
+<script>
+export default {
+	data() {
+		return {
+			list: [
+				/* ... */
+			]
+		}
+	},
+	mounted() {
+		console.log(this.$refs.items)
+	}
+}
+</script>
+
+<template>
+	<ul>
+		<li v-for="item in list" ref="items">
+			{{ item }}
+		</li>
+	</ul>
+</template>
+
+
+应该注意的是，ref 数组并不保证与源数组相同的顺序。
+
+1.3. 函数模板引用
+除了使用字符串值作名字，ref attribute 还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：
+
+<input :ref="(el) => { /* 将el赋值给一个数据属性或 ref 变量 */ }" >
+1
+注意我们这里需要使用动态的 :ref 绑定才能够传入一个函数。当绑定的元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null 。你当然也可以绑定一个组件方法而不是内联函数。
+
+1.4. 组件上的 ref
+模板引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例：
+
+<script>
+import Child from './Child.vue'
+
+export default {
+	components: {
+		Child
+	},
+	mounted() {
+		// this.$refs.child 是 <Child />组件的实例
+	}
+}
+</script>
+
+<template>
+	<Child ref="child" />
+</template>
+
+
+如果一个子组件使用的是选项式API，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。
+
+expose 选项可以用于限制对子组件实例的访问：
+
+export default {
+	expose: ['publicData', 'publicMethod'],
+	data() {
+		return {
+			publicData: 'foo',
+			privateData: 'bar'
+		}
+	},
+	methods: {
+		publicMethod() {
+			/* ... */
+		},
+		privateMethod() {
+			/* ... */
+		}
+	}
+}
+
+
+在上面这个例子中，父组件通过模板引用访问到子组件实例后，仅能访问 publicData 和 publicMethod 。
+
+1.5. 小结
+看完模板引用章节后，对模板引用小结一下。
+
+从写法上来讲， ref attribute 就是模板引用，它可以获得挂载后的DOM元素或组件实例的引用。它是用于访问底层模板中的DOM元素的。
+你可能会问“我加个id=‘xxx’，不就可以通过id访问了？”
+这个问题先不回答行或不行。
+其实在Vue中获取DOM的方法并不止一种，但官方推荐的是这种。所以现阶段，使用这种即可。
+
+二、组件基础 ⭐
+组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
+
+这和我们嵌套 HTML 元素的方式类似， Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。 Vue 同样也能很好地配合原生 Web Component。
+
+2.1. 定义一个组件
+当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件（简称SFC）：
+
+<script>
+export default {
+	data() {
+		return {
+			count: 0
+		}
+	}
+}
+</script>
+
+<template>
+	<button @click="count++">You clicked me {{ count }} times.</button>
+</template>
+
+当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义：
+
+export default {
+	data() {
+		return {
+			count: 0
+		}
+	},
+	template:`
+		<button @click="count++">
+			You clicked me {{ count }} times.
+		</button>`
+}
+
+这里的模板是一个内联的 JavaScript 字符串，Vue将会在运行时编译它。你也可以使用ID选择器来指向一个元素（通常是原生的 <template> 元素），Vue将会使用其内容作为模板来源。
+
+上面的例子中定义了一个组件，并在一个 .js 文件里默认导出了它自己，但你也可以通过具名导出在一个文件中导出多个组件。
+
+2.2. 使用组件
+提示
+接下来的指引中都使用SFC语法，无论你是否使用构建步骤，组件相关的概念都是相同的。
+
+要使用一个子组件，我们需要在父组件中导入它。假设我们把计数器组件放在了一个叫做 ButtonCounter.vue 的文件中，这个组件将会以默认导出的形式被暴露给外部。
+
+<script>
+import ButtonCounter from './ButtonCounter.vue'
+
+export default {
+	components: {
+		ButtonCounter
+	}
+}
+</script>
+
+<template>
+	<h1>Here is a child component!</h1>
+	<ButtonCounter />
+</template>
+
+若要将导出的组件暴露给模板，我们需要在 components 选项上注册它。这个组件将会以注册时的名字作为模板中的标签名。
+
+当然，你也可以全局地注册一个组件，使得它在当前应用中的任何组件上都可以使用，而不需要额外再导入（import）。关于组件的全局注册和局部注册两种方式的利弊，后面组件注册章节中专门讨论。
+
+组件可以被重用任意多次：
+
+<h1>Here is a child component!</h1>
+<ButtonCounter />
+<ButtonCounter />
+<ButtonCounter />
+
+你会注意到，每当点击这些按钮时，每一个组件都维护着自己的状态，是不同的 count。这是因为每当你使用一个组件，就创建了一个新的实例。
+
+在单文件组件中，推荐为子组件使用 PascalCase（就是大写开头，不同单词间大写区分的命名方法） 的标签名，以此来和原生的 HTML 元素作区分。虽然原生HTML标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。我们也可以用 />来关闭一个标签。
+
+如果你是直接在DOM中书写模板（例如原生 <template>元素的内容），模板的编译需要遵从浏览器中HTML的解析行为。在这种情况下，你应该需要使用 kebab-case 形式并显式地关闭这些组件的标签。
+
+<!-- 如果是在 DOM 中书写该模板 -->
+<button-counter></button-counter>
+<button-counter></button-counter>
+<button-counter></button-counter>
+
+2.3. 传递props
+从命名上来看，prop大概是property的缩写，可以认为是属性的意思。
+
+如果我们正在构建一个博客，我们可能需要一个表示博客文章的组件。我们希望所有的博客文章共享相同的视觉布局，但内容不同。要实现这样的效果自然必须向组件中传递数据，例如每篇文章标题和内容，这就会用到props。
+
+Props是一种特别的 attributes，你可以在组件上声明注册。要传递给博客文章组件一个标题，我们必须在组件的props列表上声明它。这里要用到 props 选项：
+
+<!-- BlogPost.vue -->
+<script>
+export default {
+	props: ['title']
+}
+</script>
+
+<template>
+<h4>{{ title }}</h4>
+</template>
+
+在实际应用中，我们可能在父组件中会有如下的一个博客文章数组：
+
+export default {
+	// ...
+	data() {
+		return {
+			posts: [
+				{ id: 1, title: 'My journey with Vue' },
+				{ id: 2, title: 'Blogging with Vue' },
+				{ id: 3, title: 'Why Vue is so fun' }
+			]
+		}
+	}
+}
diff --git "a/18\345\210\230\344\272\216\350\217\262/20230414\347\273\204\344\273\266.md" "b/18\345\210\230\344\272\216\350\217\262/20230414\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f3f7ce2bd3b16dd8a7bb38fac1a2847daaca5eb2
--- /dev/null
+++ "b/18\345\210\230\344\272\216\350\217\262/20230414\347\273\204\344\273\266.md"
@@ -0,0 +1,115 @@
+1.vue组件概念，创建和使用
+当我们遇到多个重复的标签，我们可以采用vue提供的单文件，组件方式来封装一套然后复用。那么什么是组件呢？
+
+1 组件是可复用的Vue实例，封装标签，样式和JS代码。
+2 组件化就是一种封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。
+3一个页面，可以拆分成一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构样式和行为。
+
+那么如何来创建组件呢？
+每个组件都是一个独立的个体，代码里体现为一个独立的Vue文件。分为全局注册和局部注册。全局注册那就是在main.js中注册，局部注册就在各自的vue文件中注册，当然各自注册后，其余可以通过引用这个组件来使用它的模板
+
+那么组件内的style样式中的scoped是什么原理呢？
+分为准备和获取阶段，在准备阶段，当前组件内标签都被添加data-v-hash值的属性，在获取阶段css选择器都被自动添加data-v-hash值的属性选择器。如下图所示
+
+
+2.vue组件通信
+那么我们如何实现从一个组件内给另外一个组件传值呢？如果我们使用LocalStorage那么该如何做呢？组件通信分为父传子和子传父。首先我们得明白父亲是App.vue文件，我们都是在App.vue父文件中引入另一个文件，因此被引入的文件称之为子文件。
+在子组件内，定义变量，准备接收，然后使用变量
+
+<template>
+  <div class="my-product">
+    <h3>标题: {{ title }}</h3>
+    <p>价格: {{ price }}元</p>
+    <p>{{ intro }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title', 'price', 'intro']
+}
+</script>
+
+<style>
+.my-product {
+  width: 400px;
+  padding: 20px;
+  border: 2px solid #000;
+  border-radius: 5px;
+  margin: 10px;
+}
+</style>
+
+
+父组件内要展示封装的子组件，步骤为引入组件，注册组件，使用组件，传值进去
+
+<template>
+  <div>
+            <!-- 
+      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
+      需求: 每次组件显示不同的数据信息
+      步骤(口诀):
+        1. 子组件 - props - 变量 (准备接收)
+        2. 父组件 - 传值进去
+     -->
+    <!-- 目标: 子传父 -->
+    <!-- 1. 父组件, @自定义事件名="父methods函数" -->
+    <MyProduct v-for="(obj, ind) in list" :key="obj.id"
+    :title="obj.proname"
+    :price="obj.proprice"
+    :intro="obj.info"
+    :index="ind"
+    @subprice="fn"
+    ></MyProduct>
+  </div>
+</template>
+
+<script>
+
+import MyProduct from './components/MyProduct_sub'
+export default {
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          proname: "超级好吃的棒棒糖",
+          proprice: 18.8,
+          info: "开业大酬宾, 全场8折",
+        },
+        {
+          id: 2,
+          proname: "超级好吃的大鸡腿",
+          proprice: 34.2,
+          info: "好吃不腻, 快来买啊",
+        },
+        {
+          id: 3,
+          proname: "超级无敌的冰激凌",
+          proprice: 14.2,
+          info: "炎热的夏天, 来个冰激凌了",
+        },
+      ],
+    };
+  },
+  components: {
+    MyProduct
+  },
+  methods: {
+    fn(inde, price){
+      // 逻辑代码
+      this.list[inde].proprice > 1 && (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(2))
+    }
+  }
+};
+</script>
+
+<style>
+</style>
+
+
+那么如果我们要修改价格，子组件内能修改父组件传入的价格吗？从父到子的数据流向，叫单向数据流。如果子组件修改，不通知父级，就会造成数据不一致性。因为vue规定props里的变量，本身是只读的。如上述代码所示
+我们需要在父组件内，绑定自定义事件和事件处理函数，语法为@自定义事件名=“父methonds里函数名”定义了一个叫fn的方法，并且方法有两个形参。
+我们需要在子组件内，在恰当的时机触发父亲绑定的自定义事件导致父亲methods里事件处理函数执行。
+其中第一个参数即为父组件的函数自定义名字。第二个第三个参数为传递给父组件自定义函数fn的两个参数。这样就实现了数据从子向父的传递和改变。并且在子组件内使用的是emit的方法。
+下一个问题是两个没有任何引入关系的组件，要如何实现互相通信呢？因此我们需要使用EventBus常用于跨组件通信时使用。