父子组件传值
1.父组件调用子组件时绑定属性，例如-> :title="title"
2.子组件中在props中声明title：props:['title','msg']
3.就可以在子组件中引用title
Tips：避免父子组件传值时命名冲突
父子组件传方法方式一样
1.父组件调用子组件时绑定属性，例如-> :run="run"
2.子组件中props中声明run：props:['title','msg','run']
3.子组件中的button引用run方法
Tips：可将子组件的值，通过父组件的方法，传给父组件
可将父组件传给子组件
1.父组件调用子组件时绑定属性，例如-> :home="this"
2.子组件中props中声明home：props:['title','msg','run','home']
3.可在子组件方法中调用home组件的属性与方法：this.home.run() this.home.title
子组件中可以可在props验证父组件传过来的值的类型。
props:{
title:String
}
示例代码：
<template>
<div id="home">
<v-header :title='title' :run='run' :home='this'></v-header>
<h5>这是Home组件</h5>
</div>
</template>
<script>
import Header from "./Header.vue";
export default {
data() {
return {
msg: "",
title:
};
},
components: {
"v-header": Header
},
methods: {
run(da) {
alert(da);
}
}
};
</script>
<style>
</style>
<template>
<div id="home">
<h2>这是Header组件</h2>
{{title}}
<button @click="run('123')">我来执行父组件传递过来的值</button>
<button @click="getParent()">我来获取传递过来的父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
},
methods: {
getParent() {
console.log(this.home);
console.log(this.home.title);
}
},
props: ["title", "run", "home"]
};
</script>
<style>
</style>