持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情
本文将对父组件向子组件传值进行展开，至于子组件向父组件传值下次再细说
如果说一个组件相当于一个独立的有着完整功能的模块体系，那么值传递就像组件之间的水泥一样，组件不是目的，目的是将所有组件组合起来形成一个完善的功能系统。
因此，组件传值对于一个组件来说必不可或缺
话不多说，直接进入正题
传递字符串
props和data中数据的区别
| 数据来源 | 读写权限 | |
|---|---|---|
| data | 自身组件所有的 | 可读可写 |
| props | 父组件传递过来的 | 只读 |
目的：防止子组件修改父组件中数据！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- data中数据和props中数据的区别：
data：自身所有的，可读可写的
props：父组件所有的，传递过来的，只读的（用于渲染）-->
<div id="app">
<h-son1></h-son1>
<h-son2 :fmsg='msg'></h-son2>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'主组件中内容'
},
methods:{},
components:{
hSon1:{
template:'<p>子组件中内容</p>'
},
hSon2:{
// props:['fmsg'],
props:{ //props中的数据都是只读的,无法修改:防止在子组件中修改父组件中的数据
fmsg:String
},
template:'<p>子组件2中内容 --- {{fmsg}}</p>'
}
}
})
</script>
</body>
</html>
运行截图
传递方法
传 字符串 和传 方法 的区别：
- 绑定方式不同：前者用v-bind/: 后者用v-on/@
子组件不但可以触发父组件中的方法，还可以传参给父组件中的方法
传参类型：字符串、对象
其传参还可以保存到父组件的data中用于渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h-son></h-son>
<h-son2 @ftosfunc="fclick" @ftosfunc2="fclick2" @ftosfunc3="fclick3"></h-son2>
<div v-if="datafromson">子组件触发父组件的方法，并向父组件传一个对象，父组件保存到自己的data中：name:{{datafromson.name}}，age:{{datafromson.age}}...</div>
</div>
<template id="hSonTmpl">
<div><!-- 必须有根元素 -->
<div>这是子组件中内容</div>
</div>
</template>
<template id="hSonTmpl2">
<div>
<div>这是子组件2中内容</div>
<button @click="sonfunction">这是子组件中按钮，触发父组件传递过来的方法</button>
<button @click="sonfunction2">这是子组件中按钮，触发父组件传递过来的方法：并且向父组件传递参数（字符串）</button>
<button @click="sonfunction3">这是子组件中按钮，触发父组件传递过来的方法：并且向父组件传递参数（对象）</button>
</div>
</template>
<script>
// 字面量类型的组件模板对象
var hSon={
template:'#hSonTmpl'
}
var hSon2={
template:'#hSonTmpl2',
data(){ //必须这样写,否则报错
return {
obj:{name:'zhangsan',age:19,sex:'nv'}
}
},
methods:{
sonfunction(){
this.$emit('ftosfunc');
},
sonfunction2(){
this.$emit('ftosfunc2',123,234);
},
sonfunction3(){
this.$emit('ftosfunc3',this.obj)
}
}
}
var vm=new Vue({
el:'#app',
data:{
datafromson:null
},
methods:{
fclick(){
console.log(`定义在父组件中的方法`)
},
fclick2(data,data2){ <!-- 子组件还可以向父组件的方法中传递参数，其也写对应数量的参数，即可拿取过来 -->
console.log(`定义在父组件中的方法,子组件传递过来的参数：${data}、${data2}`)
},
fclick3(params){
console.log(params)
this.datafromson=params
}
},
components:{
hSon,
hSon2
}
})
</script>
</body>
</html>
运行截图
父传子总结图
文末总结
其实再复杂的事情，只要肯花时间，把它拆开来，揉碎了，一点点消化它，也会变得很简单。
难的是坚持，持之以恒的决心。
