admin

10_vuecli/helloworld/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -18,6 +19,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

10_vuecli/helloworld/src/components/AddControl.vue

@@ -2,7 +2,14 @@
     <div>
         <div class="box">
             <h1>{{ title }}</h1>
+            <!-- slot （插槽） 用来接收父组件传递过来的标签内容 -->
+            <!-- 需要把传递过来的标签显示在哪里 就把slot 放在哪个位置 -->
+            <!-- <slot></slot> -->
+
+            <!-- 如果需要接收多个标签那么需要使用具名插槽 -->
+             <slot name="text1"></slot>
             <h1>{{ count }}</h1>
+            <slot name="text2"></slot>
             <button v-on:click="addFun">加一</button>
         </div>
     </div>
@@ -17,7 +24,21 @@
         },
         // props （属性） 用来接收父组件传递过来的数据
         // 用拟人的方式描述组件间的关系 外层的为父组件 内层的为子组件
-        props:['title'],
+        // 数组形式为简写模式 没有任何附加条件
+        // props:['title'],
+        // 对象形式为详细模式 可以添加其他属性 例如默认值等附加条件
+        props:{
+            // 需要传递的属性名称
+            title:{
+                // 属性的类型
+                // 可以是String Number Boolean Array Object 等
+                type:String,
+                // 属性的默认值
+                default:'累加器'
+                // 设置当前属性为必传项 如果值为true 则必须传递该属性
+                // required:true
+            }
+        },
         methods:{
             addFun(){
                 this.count++;

10_vuecli/helloworld/src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

10_vuecli/helloworld/src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

10_vuecli/helloworld/src/views/PageTwo.vue

@@ -5,8 +5,23 @@
          <h1> 当前组件内的数字为：{{ msg }}</h1>
          <!-- 可以为组件自定义事件名称 -->
         <AddControl v-bind:title="title" v-on:changeCount="childChange" ></AddControl>
-        <AddControl title="累加器2"></AddControl>
-
+        <AddControl >
+            <!-- 如果传入的只是一个单个标签 可以不添加任何容器 -->
+            <!-- <div>
+                <h1>hello Vue</h1>
+            </div> -->
+            <!-- 如果传递的是多个标签 则需要添加容器 template -->
+            <template v-slot:text1>
+                <div>
+                    <h1>hello Vue</h1>
+                </div>
+            </template>
+            <template v-slot:text2>
+                <div>
+                    <h1>hello world</h1>
+                </div>
+            </template>
+        </AddControl>
     </div>
 </template>
 <script>

10_vuecli/helloworld/yarn.lock

@@ -1422,7 +1422,7 @@
   dependencies:
     "@vue/cli-shared-utils" "^5.0.9"
 
-"@vue/cli-plugin-vuex@^5.0.9":
+"@vue/cli-plugin-vuex@^5.0.9", "@vue/cli-plugin-vuex@~5.0.0":
   version "5.0.9"
   resolved "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.9.tgz#29830a46f075c9bb35a00cd37e8c0d133a5c41a8"
   integrity sha512-AQhgGNFVd4Pu2crvS0a+hRckgrJv07gzOASdbLd3I72wkT43dd01MLRp8IBRRsu92t3MXenW86AZUCbQBz3//A==
@@ -5891,6 +5891,11 @@ vue@^2.6.14:
     "@vue/compiler-sfc" "2.7.16"
     csstype "^3.1.0"
 
+vuex@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 watchpack@^2.4.0, watchpack@^2.5.2:
   version "2.5.2"
   resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.5.2.tgz#e12e82d84674266fc1c6dbfe38891b92ff0522ec"