vue 兄弟传值和父子传值

这是父子传值的mian.js文件：

App.vue wenjian

<template>
  <div id="app">
    <Child />
    <HelloWorld :arr="str" @change="get" ref="HelloWorld" :arr1.sync='str1'/>
    
  </div>
</template>

<script>
import Child from "./components/child.vue";
import HelloWorld from "./components/HelloWorld.vue";


export default {
  name: "App",
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      str: [
        { name: "张三", age: 16 },
        { name: "李四", age: 15 },
        { name: "王五", age: 19 },
      ],
      
      str1:'我'
    };
  },
  mounted() {
    this.$refs.HelloWorld.$el.style.background = "red";
    this.$refs.HelloWorld.fn()
    console.log(this.$refs.HelloWorld.aa);
  },
  methods: {
    get(i) {
      this.str.splice(i, 1);
    },
  },
};
</script>

<style>
li {
  list-style: none;
  text-align: center;
}
</style>

组件一：

<template>
  <div>
    <button @click="ff">点击</button>
    <h1>{{ child }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      child: "出现了",
      falg: false,
    };
  },
  //   mounted() {
  //       this.$bus.$emit("childdd", this.child);
  //   },
  methods: {
    ff() {
      this.falg = !this.falg;
      this.$bus.$emit("childdd", this.child, this.falg);
    },
  },
};
</script>

<style>
</style>

组件二：

<template>
  <div class="hello">
    <h1 @click="add">{{ arr1 }}<span v-show="msg1">{{ msg }}</span></h1>
    

    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item.name + ~~~~~+item.age }}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    arr: Array,
    arr1: String,
  },
  methods: {
    del(i) {
      this.$emit("change", i);
    },
    add() {
      this.$emit("update:arr1", "子组件");
    },

    fn() {
      alert("1111");
    },
  },
  created() {
    this.$bus.$on("childdd", (val,falg) => {
      this.msg1 = falg
      console.log(val);
      this.msg = val;
    });
  },
  data() {
    return {
      aa: "触发了",
      msg: "",
      msg1:''
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  text-align: center;
}
</style>