vue 组件传值

App组件


<template>
    <div class="app">
      <h2>App组件</h2>
      <h3>接收到子组件的消息为:{{twoVal}}</h3>
        <One :val="msg"/>
        <Two @handle="handleGetDate"/>
    </div>
</template>

<script>
import One from "./components/one.vue";
import Two from "./components/two.vue";
export default {
    components:{
      One,
      Two
    },
    data(){
      return {
          msg:"我是APP组件的信息",
          twoVal:""
      }
    },
    methods:{
      handleGetDate(val){
        console.log(val);
        this.twoVal = val;
      }
    }
}
</script>



<style>

.app{
  padding:40px;
  background: peru;
}
</style>

子组件1

<template>
    <div class="one">
       <h2>one</h2>
       <h3>接收到父组件的消息为：{{val}}</h3>
       <button @click="handleSend()">发送给Two组件</button>
       <OneOne/>
    </div>
</template>

<script>
import OneOne from "./oneone.vue";
export default {
//   props:["val"],

    props:{
        val:{
            type:String,
            required:true
        }
    },
    components:{
        OneOne
    },
    created() {
        console.log(this,"one")
    },
    methods:{
        handleSend(){
            this.$observer.$emit("handleTwo","我是ONE组件的消息")
        }
    }
}
</script>

<style>
.one{
    padding:30px;
    background:red
}


</style>

子组件2

<template>
  <div class="two">
    <h2>two</h2>
    <input type="text" v-model="msg" />
    <button @click="send()">发送给父组件</button>
    <h3>接收到one组件的消息为:{{ONEval}}</h3>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this, "two");

    this.$observer.$on("handleTwo", val => {
      console.log(val);
      this.ONEval = val;
    });
  },
  data() {
    return {
      msg: "",
      ONEval: ""
    };
  },
  methods: {
    send() {
      this.$emit("handle", this.msg);
    }
  }
};
</script>

<style>
.two {
  padding: 30px;
  background: yellow;
}
</style>

子组件3

<template>
    <div class="oneone">
       <h2>oneone</h2>
    </div>
</template>

<script>
export default {
  
}
</script>

<style>
.oneone{
    padding:30px;
    background:green
}
</style>