说明:文章会通“.html”结尾的文件去编写Vue相关代码,这样适用于初学者,同时适用于“Vue-Cli”做模块化开发的读者,大同小异。
正文
基础环境代码(v2.6.11非压缩版本,这个并不重要)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = new Vue({
el : '#app',
});
</script>
</html>
1. 父传子数据:props
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<!--这里是关键点: 通过v-bind自定义子属性,来获取父组件的数据 -->
<com1 :p_data="parent_data"></com1>
</div>
</body>
<!-- 声明一个子组件 并使用子组件的数据-->
<template id="template_id">
<div>{{son_data}}</div>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '这是父组件的数据,把当前作为父组件'
},
components : {
com1 : {
template: '#template_id',
data() {
return {
son_data : this.p_data
}
},
//通过props关键字来说明子组件要使用父组件的数据
props : ['p_data']
},
}
});
</script>
</html>
</html>
2. 子传父:$emit()
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{parent_data}}</h1>
<!-- 第3步 父组件的元素接收到子组件要执行emit_func(),便执行了parent_func方法 -->
<!-- 说明:由于是子组件的数据,可以简单理解为:一些操作都要放到子组件间中执行,所以 放到com1标签中,放其它地方作甚?-->
<com1 @emit_func="parent_func"></com1>
</div>
</body>
<template id="template_id">
<!-- 第1步 点击子组件的按钮,触发子组件的方法 -->
<button @click="son_click">按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '',
},
methods : {
//第4步,子组件触发了父组件的这个方法,并传递了值,就可以对数据进行操作。子组件向父组件通信完成
parent_func(son_data) {
this.parent_data = son_data;
}
},
components : {
com1 : {
template: '#template_id',
data() {
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
// 第2步 子组件的方法体会执行$emit()方法,此处可以通俗的理解为,由于Vue内部的机制,子组件向父组件发射通信,告诉父组件用哪个方法接收,并且发射了什么数据,以供父组件操作。
this.$emit('emit_func', this.son_data);
}
}
},
}
});
</script>
</html>
3. 父组件获取子组件属性或方法:$refs
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<!-- 步骤1 父组件中的按钮,点击事件调用了parent_click方法 -->
<button @click="parent_click">父按钮</button>
<!-- 步骤3 检测到test_ref被调用,会查找对应的组件的信息,然后会被调用 -->
<com1 ref="test_ref"></com1>
</div>
</body>
<template id="template_id">
<button >子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
//步骤2 通过$refs对象调用了test_ref元素绑定的属性或者方法。
//$refs对象是关键字,后面跟自定义ref名称
parent_click() {
console.log(this.$refs.test_ref.son_data);
this.$refs.test_ref.son_func();
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_func() {
alert(1)
}
}
},
}
});
</script>
</html>
4. 父组件获取子组件属性或方法:$children (不推荐使用,靠数字下标找对应关系,容易出错)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<button @click="parent_click">父按钮</button>
<com1></com1>
</div>
</body>
<template id="template_id">
<button >子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
parent_click() {
//通过下标找到子组件的数据,一旦子组件数量发生变动,下标就对应不上,造成逻辑错误。
console.log(this.$children[0].son_data);
this.$children[0].son_func();
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_func() {
alert(1)
}
}
},
}
});
</script>
</html>
5. 子组件获取父组件属性或方法:$parent
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
</body>
<template id="template_id">
<button @click="son_click">子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
parent_func() {
alert(1);
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
console.log(this.$parent.parent_data);
this.$parent.parent_func();
}
}
},
}
});
</script>
</html>
6. 子组件获取根组件属性或方法:$root
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<com1></com1>
</div>
</body>
<template id="template_id">
<button @click="son_click">子按钮</button>
</template>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
parent_func() {
alert(1);
}
},
components : {
com1 : {
template: '#template_id',
data(){
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
console.log(this.$root.parent_data);
this.$root.parent_func();
}
}
},
}
});
</script>
</html>
扩展
1:props 的增强写法,对象的形式(约束接收父级的值,父级的值违反约束会报错)。
props :{
test_field : {
type : [Boolean, Number], //这里的不用加引号,若此处是Object则需要default是函数,并且返回一个对象
default : 'default value', //给默认值
required : false, //是否必填
}
}
2. $res:还可操作DOM元素(不推荐使用,因为Vue不推荐操作DOM)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
<button @click="getElement">按钮</button>
<div ref="test_ref">div的值</div>
</div>
</body>
<script>
const app = new Vue({
el : '#app',
data : {
parent_data : '父组件数据',
},
methods : {
getElement() {
console.log(this.$refs.test_ref.innerText);
}
}
});
</script>
</html>
3:Vuex是专门为Vue官方开发的状态管理模式,可以理解为组件之间数据共享的管家。Vuex也可以作为父子间传值的一种方式,例如通过mutation操作state。