1.父子组件之间的访问方式
2.前端模块化
3.webpack

1.父子组件之间的访问方式

Vue基础知识
    之前我们已经了解到组件的创建方式(三种全局组件创建方式和两种局部组建方式),props属性使用以及接受动态数据和静态数据。那我们今天就要学习一下关于:

有时候我们需要父组件访问子组件,子组件直接访问父组件,或者是子组件访问跟组件

父组件访问子组件:使用$children或$refs(reference引用之意)

$refs => 对象类型,默认为空的对象,必须要加ref=”xxxx” :在组件中使用ref(即,即表示给组件添加唯一的id属性)相当于给标签添加一个id,使得开发者可以知道我们操作的是那个DOM,用来获取DOM元素和组建引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<body>
<div id="app">
<cpn ref="aaa"></cpn>
<button @click="btnClick('hello woman')" value="click">按钮</button>
</div>
<template id="cpn">
<div>我是子组件</div>
</template>
<script>
var app = new Vue({
el:"#app",
data:{
message:'hello man'
},
methods:{
btnClick(hi){
console.log(hi);
/*
*调用子组件的name返回值
* 经测试:this必须添加,否则会出现$refs未定义的报错
* $refs.aaa.name中的aaa相当于id属性,也必须需要,否则会弹出name未定义的错误undefined
* */
console.log(this.$refs.aaa.name);
console.log(this.$refs.aaa.num)
}
},
components:{
'cpn':{
template:'#cpn' ,
data(){
return {
name:"我是子组件的name",
num:18
}
},
methods: {
showMessage(){
console.log("showMessage")
}
}
}
}
})
</script>

子组件访问父组件:使用$parent(不常用)

2.前端模块化方式

2.1 CommonJS的模块化实现,需要nodeJS的支持

【参考之前的文章】

2.2 ES6的模块化实现(可以直接在浏览器上直接运行)

如何实现模块化,在html中需要使用type=’module’属性。

1
2
3
4
<!--index.html-->
<h3>hello world</h3>
<script src="./aaa.js" type="module"></script>
<script src="./bbb.js" type="module"></script>

此时表示aaa.js等是一个单独的模块,此模块是有作用域的。如果要使用aaa.js内的变量,需要在aaa.js中先导出变量,再在需要使用的地方导入变量。

2.1 导出方式:这里推荐使用统一导出

1
2
3
4
5
6
7
8
9
10
11
12
// aaa.static
// 这里推荐使用统一导出:
var age = 22;
function sum(num1, num2) {
return num1 + num2;
}
var flag = true;
if (flag) {
console.log(sum(10, 20))
}
//2.最后统一导出,导出sum函数,flag,age等属性值
export {flag,sum,age}

2.2 导入方式:
使用import {name,flag,sum} from './aaa.js'导入多个变量

1
2
3
4
5
6
7
8
9
10
// bbb.js导入aaa.js中的sum函数,flag,name等属性值
import {name,flag,sum} from './aaa.static';

console.log(name);

if(flag){
console.log("小明是天才");
}

console.log(sum(20,30));

2.3 默认导入 export default:有且只有一个export default
导出:

1
2
3
export default {
flag,sum,age
}

导入:注意:使用默认导出会将所有需要导出的变量打包成一个对象,此时导出一个对象,此时我在bbb.js中导入变量时候命名为aaa,如果要调用变量需要使用aaa.变量。

1
2
3
4
5
6
7
8
9
10
//默认导入 export default
import aaa from './aaa.static';
console.log(aaa.sum(10,110));

//使用import * as aaa from './aaa.static'统一全部导入

// 5.统一全部导入
import * as aaa from './aaa.static';
console.log(aaa.flag);
console.log(aaa.name);

3.webpack

3.1 webpack的安装

  1. webpack依赖node环境。
  2. node环境依赖众多包,所以需要npm,npm(node packages manager)node包管理工具
  3. nvm是node管理工具可以自由切换node环境版本

3.2 webpack起步

【参考GitHub关于webpack的详细说明,这里不做重复累述】 以及【哔哩哔哩视频】

未完待续。。。


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议