vue简单的组件传值

父传子

子组件代码：

<template>
  <div>
      {{text}}----{{msg}}
</div>
</template>

<script>
export default {
  data() {
    return {
      text: "子组件"
    };
  },
  props:['msg']//props接收父组件的值
};
</script>

<style>
</style>

父组件代码：

<template>
 <div>
   首页
   <Mycom :msg="msg"></Mycom>//添加msg属性 这里用了动态绑定

 </div>
 
</template>

<script>
// @ is an alias to /src
import Mycom from "@/components/Mycom.vue"
export default {
  name: 'home',
  data(){
    return{
      msg:"我是父组件的数据"
    }
  },
  components: {
   Mycom
  }
}
</script>

子传父：

1.子组件绑定一个事件，并在该事件中触发一个自定义事件this.$emit ("自定义事件名"，“要向父组件传递的数据”)

2.父组件中的子组件标签中监听该自定义事件并添加一个响应该事件的处理方法 @自定义事件名=“响应该事件的处理方法”，

3.在父组件的methods中创建响应该事件的处理方法并用参数接受子组件传来的值

代码如下：

子组件Mycom：

<template>
  <div>
       <h1>子组件</h1>
      <button @click="sendmsgtoparent">点击向父组件传递数据</button>   
</div>
</template>

<script>
export default {
  data() {
    return {
      submsg:"我是子组件的值"
    };
  },
  methods:{
      sendmsgtoparent(){
          this.$emit("listentochild",this.submsg)
      }
  }
};
</script>

<style>
</style>

父组件App

<template>
 <div>
   <h1>父组件</h1>
   <Mycom @listentochild="showmsgfromchild"></Mycom>

 </div>
 
</template>

<script>
import Mycom from "@/components/Mycom.vue"
export default {
  name: 'home',
  data(){
    return{
    }
  },
  components: {
   Mycom
  },
  methods:{
    showmsgfromchild(data){
      console.log(data)
    }
  }
}
</script>