说明:文章会通“.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">
<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 : ['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>
<com1 @emit_func="parent_func"></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(son_data) {
this.parent_data = son_data;
}
},
components : {
com1 : {
template: '#template_id',
data() {
return {
son_data : '子组件的数据'
}
},
methods : {
son_click() {
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">
<button @click="parent_click">父按钮</button>
<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 : {
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],
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。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析