路由部署注册在我的另一篇博文:Vue路由的部署
总结:
父传子:在标签上传递之后子组件通过props接收
子传父:子组件类似创建一个事件可以通过$emit传递 触发父组件
父传子代码
父组件:
<template >
<div>
<child :msg="text"></child>
<br /><br /><br /><br /><br /><br /><br />
<!-- 此处(text)可以省略 -->
<input type="text" v-model="text" @change="dataChange(text)" />
</div>
</template>
<script>
import child from "../components/child";
export default {
name: "login",
data() {
return {
text: "我是登录页面",
};
},
components: {
child,
},
methods: {
dataChange(data) {
this.msg = data;
},
},
};
</script>
在标签处传递
子组件:
<template>
<div class="container">
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
msg: String,
},
};
</script>
<style scoped>
#container {
color: red;
margin-top: 50px;
}
</style>
通过props接收后面注意类型
字传父代码
子组件:
<template>
<div class="container">
<input type="text" v-model="msg" />
<button @click="setData">立刻!传递</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我要传点什么呢",
};
},
methods: {
setData() {
this.$emit("getDataa", this.msg);
},
},
};
</script>
<style scoped>
#container {
color: red;
margin-top: 50px;
}
</style>
通过emit传值
父组件:
<template >
<div>
<!-- 看好aa和ss即可清楚谁和谁一对 -->
<child @getDataa="getDatas"></child>
<p>{{ msg }}</p>
</div>
</template>
<script>
import child from "../components/child";
export default {
name: "login",
data() {
return {
msg: "我是登录页面",
};
},
components: {
child,
},
methods: {
getDatas(data) {
this.msg = data;
},
},
};
</script>
注意命名 哪个对应哪个可以把getDataa当成一个事件 子组件可以触发