From 8d2aaee76388eaa441c95cc3157fa1dc37560df6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E8=89=BA=E7=BC=A4?= <1728066681@qq.com> Date: Tue, 8 Jun 2021 14:26:39 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...66\345\237\272\347\241\200\357\274\211.md" | 5 +++ .../Vue/6-8.html" | 34 +++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" create mode 100644 "\346\242\201\350\211\272\347\274\244/Vue/6-8.html" diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" new file mode 100644 index 0000000..24f57e3 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" @@ -0,0 +1,5 @@ +## Vue.js 第五节课 (组件基础) + ++ 组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码 + +## 一、注册组件 diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" new file mode 100644 index 0000000..3cd2f62 --- /dev/null +++ "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" @@ -0,0 +1,34 @@ + + + + + + + + Document + + + +
+ +
+ + + + + + + + + \ No newline at end of file -- Gitee From e15e29de3bbcdb8d310e344ddcf6647e2971d2ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E8=89=BA=E7=BC=A4?= <1728066681@qq.com> Date: Tue, 8 Jun 2021 22:41:07 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...66\345\237\272\347\241\200\357\274\211.md" | 105 +++++++++++++++++- .../Vue/6-8.html" | 24 +++- 2 files changed, 124 insertions(+), 5 deletions(-) diff --git "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" index 24f57e3..ac4d958 100644 --- "a/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" +++ "b/\346\242\201\350\211\272\347\274\244/Vue - 2021.06.08\357\274\210\347\273\204\344\273\266\345\237\272\347\241\200\357\274\211.md" @@ -2,4 +2,107 @@ + 组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码 -## 一、注册组件 +## 一、全局组件 Vue.component() + +``` +Vue.component('good',{ + template:'

good nice

' + }) +``` + +1. 设置Vue的接管范围 + +``` + + + + + Hello World + + + +
+ +
+ + + +``` + +## 二、局部组件 + +1. 先在外部声明，然后在Vue实例中实例化 +``` +var hello={ + template:'

hello world

' + } + var app=new Vue({ + el:'#app', + components:{ + hello:hello //在此处生成局部组件两个hello可以不同 + } + }) +``` + +## 二、动态组件(组件切换) + +1. 父组件向子组件传值 + ++ 传值 + ++ 里面的hiboy会传递到子组件中替代slot + +2. 子组件向父组件传值 + ++ 子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘，值)//值可为空也可多个 + +``` + +
+ +

{{num}}

+
+ + +``` +注意：组件的data是一个函数通过返回值来实现 + +通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容， + +this.$refs.one.number获取了组件中的number \ No newline at end of file diff --git "a/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" index 3cd2f62..18d5f6d 100644 --- "a/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" +++ "b/\346\242\201\350\211\272\347\274\244/Vue/6-8.html" @@ -9,8 +9,19 @@ -
- +
+ + + + + + +
@@ -18,8 +29,13 @@ +``` ++ 注意：data返回的是一个函数 + +### 3. 在src自己创建的App.Vue里引Vue文件 +``` + + + +``` ++ 注意：在template中使用标签命名规则，以上面注册的组件为例: \ No newline at end of file -- Gitee