VUE 父子组件传值

周大胖子 · 发表于 2018-11-24 23:39:38

先掰扯一下：
传值的值分为三种：数据、方法、父组件本身
这个传值又叫单向下行数据流；传值的方式又叫单向下行绑定
顾名思义：就是说我父组件可以打儿子，儿子等着挨揍就行，儿子不能来打劳资；【但是这种情况不是绝对的，比方说你考试不好劳资会生气】

好嘞，开始贴代码
先贴个 home.vue 的【就是父组件】

<template>
<div id="home">
<button @click="chan"> 点击切换触发生命周期 </button>
这是home组件 <span class="lmtest">测试值是否变色</span>
{{todata}}------{{mvc}}
<button @click="doone()">改变父组件的值子组件的数据也会改变</button>
<br>
<button @click="dotwo()">改变子组件的值父组件的数据也会改变</button>
<v-head v-if="b" :todata="todata" :dothree="dothree" :dofour="dofour" :home="this"></v-head>
</div>
</template>
<script>
// 1.引入头部组件【组件文件尽量放在 components/ 目录中，大写首字母的.vue文件】
// 2.注册组件【注意如果下面components内容为ES6 语法则html 则写成对应的标签】
// 3.引入组件【在页面中写入<v-head></v-head> 】
import Head from "./Head.vue";
export default {
data() {
return {
b:false
,todata:'这是home组件的值'
,mvc:'溜溜留'
};
},
methods: {
chan(){
if(this.b){
this.b = false
}else{
this.b = true
}
}
,doone(){
this.todata='哈哈哈哈哈哈哈哈哈哈哈哈 }
,dotwo(){
alert(this.todata);
}
,dothree(){
alert('向子组件传递方法');
}
,dofour(e){
//在这测试我发现个本质，把这个方法传递给子组件时，其实就是子组件【触发】父组件的方法
// 在这里灵活应用就可以形成子组件向父组件传值
this.mvc='哈哈哈'
}
},
name: "app",
components: { //这用于组件的注册，
'v-head':Head
}
,mounted(){
// alert('home挂载到demo后')
}
};
</script>
<style scoped>
.lmtest {
background: #000;
color: #fff;
}
h2 {
font: 10px;
}
</style>

复制代码

再贴个 head.vue的【就是子组件】

<template>
<div id="head">
<h2> 这是头部组件 </h2>
这是从父组件中接收到的值--------{{todata}}
<hr>
<button @click="dofour()">点我改变子组件的值</button>
<button @click="dothree()">接收父组件传过来的方法</button>
<button @click="abc()">接收传递过来的整个父组件实例</button>
</div>
</template>
<script>
export default {
data(){
return {
f:'这是子组件'
}
}
,props:['todata','dothree','dofour', 'home'] //这个没有验证
// ,props:{ // 验证版本，也包括设置默认值
// 'todata':String, //字符串
// 'dothree':Function, //方法
// 'home':Object, //对象
// 'propB': [String, Number], 多个可能的类型
// 'm':{ //这就牛逼了还可以设置默认值
// type: Number,
// default: 100
// },
// }
,methods:{
abc(){
// 既然可以整个实例传过来，那在子组件中就这么接收
alert(this.home.mvc)
// 使用方法
this.home.doone()
}
}
};
</script>
<style>
</style>

复制代码

最后聊聊这个 props 的验证问题：
视频里说这玩意没啥用，我个人觉得——尼玛报错报控制台有个鬼用啊；不过默认值还不错