VUE——父子组件传值

为了建两个页面，parent child 把HelloWorld页面删掉，花费了我整整3个小时。我以为，我以为有时候真的让我很伤心。

待更新。

首先写两个vue页面，parent和child。让parent在App页面中显示，然后让child在parent页面中显示，引用就好了。参考前面的博客。

父亲传给儿子的数据，如何写

 <Child title="我是父亲传给儿子什么的那"/>

儿子接收title中的内容

export default {
  props: {              //写一个props，用来接收父组件穿过来的数据
    title: String       //title 传的对象， string定义的类型 
  }
}
//放到html中显示title
{{title}}

简单吧！注意传的对象的类型。

儿子如何发数据给父亲那！

<button v-on:click="sendMsg" type="button" name="button">按钮</button>

data() {
   return {
     initMsg: "我是儿子，我发数据给你"   //定义发送数据内容
   }；
}

methods: {
   sendMsg(event) {    //event参数  
     console.log(this.initMsg);    //显示打印到页面上
     this.$emit("getInfo", this.initMsg);  //发送数据到父组件
   }
 }

上面的三段代码注解放的位置。

父组件如何接收传递的内容呐。

<Child v-on:getInfo="getInfos" />
{{initMessage}}   //显示传递过来的值  ，initMessage使用前先赋值为空


initMessage: ""  写在data方法中


 methods: {
    getInfos(data) {  //定义方法接收子组件传递来的数据
      this.initMessage = data;    //变量initMessage接收子组件传递过来的数据。
      console.log(data);
    }
  }

上面就写了父子组件的传值。欢迎评论留言指出问题！