Vue组件之间的传值

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

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

3.父传子

5. 子传父 （1）第一种方式



6. 子传父（2）第2种方式

项目结构：

完整版代码：

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>