vue之组件传值

父组件App.vue内容,共有五个子组件。父组件使用sync同步的方式传值给子组件child1，子组件修改父组件的传过来的值。

<template>
  <div id="app">
    <child1 :msgToChild1.sync="fMsg1"></child1>
    <hr>
    <child2></child2>
    <hr>
    <child3></child3>
    <hr>
    <child4></child4>
    <hr>
    <child5></child5>
  </div>
</template>

<script>
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
import child3 from './components/child3.vue'
import child4 from './components/child4.vue'
import child5 from './components/child5.vue'

export default {
  name: 'App',
  components: {
    child1,
    child2,
    child3,
    child4,
    child5,
  },
  data(){
    return{
      fMsg1:'我是父组件的变量fMsg1。', //用于child1组件
    };
  }
}
</script>

<style>

</style>

子组件child1.vue的内容 child1.vue

<template>
    <div id="child1">
        <h1 @click="change">{{msgToChild1}}</h1>
    </div>
</template>

<script>
export default {
    name:"child1",
    props:{
        msgToChild1:{
            type:String,
            required:true
        }
    },
    methods: {
        change(){
            this.$emit("update:msgToChild1","我是在子组件1中把父组件的fMsg改变了。")
        }
    },
}
</script>

子组件2和子组件3互相传值，实现修改对方的内容。
子组件2的内容 child2.vue

<template>
  <div id="child2">
    <button @click="valChild2_3">点我2占掉3</button>
    <h2><span>这是组件child2的位置：</span> {{msgChild2}}</h2>
  </div>
</template>

<script>
export default {
  name: "child2",

  data() {
    return {
      msgChild2:
        "我是child2组件的人。",
    };
  },

  methods: {
    valChild2_3() {
      this.$bus.$emit("busVal2_3_handle", this.msgChild2);
    },
  },

  created() {
    this.$bus.$on("busVal3_2_handle", (val) => {
      this.msgChild2 = val;
    });
  },
};
</script>

子组件3的内容 child3.vue

<template>
  <div id="child3">
    <h2>这是组件child3的位置：{{ msgChild3 }}</h2>
    <button @click="valChild3_2">点我3占掉2</button>
  </div>
</template>

<script>
export default {
  name: "child3",

  data() {
    return {
      msgChild3: "我是child3组件的人。",
      msgChild33: "我是组件3，专门用来替换组件2的内容。",
    };
  },
  
  methods: {
      valChild3_2(){
          this.$bus.$emit('busVal3_2_handle',this.msgChild33)
      }
  },

  props: {},

  created() {
    this.$bus.$on("busVal2_3_handle", (val) => {
      this.msgChild3 = val;
    });
  },
};
</script>

子组件4本身有个子组件，用子组件5改变子组件4的子组件的内容。
子组件4 child4.vue

<template>
    <div id="child4">
        <childson></childson>
    </div>
</template>

<script>
import childson from './child4_son.vue'

export default {
    name:"child4",
    data(){
        return{

        }
    },
    components:{
        childson,
    },
    methods: {
        
    },
}
</script>

子组件4的子组件，child4_son.vue

<template>
  <div id="child4_son">
      <h1>{{msg_son}}</h1>
  </div>
</template>

<script>
export default {
    name:"child4_son",
    data(){
        return{
            msg_son:'我爸排老四。',
        }
    },
    created(){
        this.$bus.$on("five_re",(val)=>{
            this.msg_son=val
        })
    }
}
</script>

<style>

</style>

子组件5的内容 child5.vue

<template>
  <div id="child5">
      <button @click="five_beat">五叔改侄子</button>
  </div>
</template>

<script>
export default {
  name: "child5",
  data() {
    return {
      msg_child5: "我是他五爷",
    };
  },
  methods: {
      five_beat(){
          this.$bus.$emit("five_re",this.msg_child5)
      }
  },
};
</script>

<style>
</style>