父组件
<template>
<div id="app">
<p>父组件</p>
<p>------------------</p>
<p>子组件</p>
<Demo :list="list"></Demo><!-- 在父组件中利用:list="list"来传值-->
</div>
</template>
<script>
import Demo from "./Demo.vue"
export default {
name: 'app',
data(){
return {
list:{id:1,task:"设计产品原型"},
}
},
components: {
Demo
}
}
</script><template>
<div id="myfooter">
<p>{{list.id}}</p>
<p>{{list.task}}</p>
</div>
</template>
<script>
export default {
name: 'Demo',
props:["list"],//在子组件中利用props:["list"]来接收父组件传过来的值 ;在此必须加引号
}
</script>
------------------------------------------------------------------------------------------------------------------------------
<template>
<div id="myfooter">
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
name: 'myfooter',
data(){
return {
title:"我是子组件中的数据"
}
},
methods:{
submit(){
this.$emit("submit",this.title)//在子组件中触发事件，格式为：this.$emit("事件名",要传的值)
}
}
}
</script><template>
<div id="app">
<p>{{content}}</p>
<Demo @submit="aa"></Demo> <!--在父组件中接受值，格式为:@事件名 = "函数" -->
</div>
</template>
<script>
import Demo from "./Demo.vue"
export default {
name: 'app',
data(){
return {
content:''
}
},
methods:{
aa(value){
this.content=value;//在此value就是从子组件传过来的值
}
},
components: {
Demo
}
}
</script>
----------------------------------------------------------------------------------------------------------------------------
<template>
<div class="child">
{{ message }}
</div>
</template>
<script>
export default {
name: "Demo",
props: {
message: String,
},
};
</script>
<template>
<div class="father">
<Demo :message="text" />
<input v-model="data" />
<button @click="changeDemo">点我改变子组件的值</button>
</div>
</template>
<script>
import Demo from "./Demo.vue";
export default {
name: "Father",
components: { Demo },
data() {
return {
data: "niha",
text: "我是父组件的值",
};
},
methods: {
changeDemo() {
this.text = this.data;
},
},
};
</script> 
参考
vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…_Jet_closer_burning的博客-CSDN博客