1.先在main.js中配置要使用的全局vue文件:如图

Vue组件之间的传值_标签名


2.配置全局注册或本地注册

Vue组件之间的传值_项目结构_02


3.父传子

Vue组件之间的传值_默认值_03

  1. 子传父 (1)第一种方式
  2. Vue组件之间的传值_项目结构_04

  3. 子传父(2)第2种方式
  4. Vue组件之间的传值_vue_05

项目结构:

Vue组件之间的传值_标签名_06


完整版代码:

1.main.js页面:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Home from './components/Home'
import Content from './components/Content'

Vue.config.productionTip = false

Vue.component("homeapp",Home)
Vue.component("contentapp",Content)

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

2.App.vue页面:

<template>
<div id="app">
{{name}}
<homeapp :myName="name" :xiaohe="name1"></homeapp>
<homeapp @newName="name=$event"></homeapp>
</div>
</template>

<script>

export default {
name: 'App',

data(){
return {
name:"0000200"
}
},
methods:{
name1:function (name) {
this.name=name;
}
}
}
</script>

3.Home.vue页面:

<template>
<div>
{{title}}<br>
<input type="button" @click="dianwo" value="发发发">
{{myName}}
</div>
</template>

<script>
import Content from './Content'
export default {
//本地注册
comments:{
//标签名 组件名
"contentapp":Content
},
name: "Home",
data(){
return{
title :"Hello Vue1111"
}
},
methods:{
dianwo:function () {
this.$emit("newName","很符合")
this.xiaohe("xiaohe")
}
},
props:{
myName:{
type:String,
required:true,
default:"默认值"
},
xiaohe:{
type: Function
}
}
}
</script>

<style scoped>

</style>

4.Content.vue页面:

<template>
<div>
{{age}}
</div>
</template>

<script>
export default {
name: "Content",
data(){
return {
age:16
}
}
}
</script>

<style scoped>

</style>