逼疯一个前端的入门的程序猿--vue组件传值（父传子、子传父）上篇

众所周知，vue常用的传值方式有三种：
     第一、父传子;第二、子传父；第三、也是最难的，子传子。
     emm，首先，从最简单的父传子说起，父传子，即数据从父组件传给子组件，废话不多说，上代码：
父组件：

<template>
  	<div id="app">
  		父传：
    	<input v-model="message2"> 
    	<HelloWorld :msg3="message2"/>
  	</div>
</template>

父组件的引组件、写数据···

import HelloWorld from './components/HelloWorld.vue'
data(){
	return{
		message2:" ",
	}
}

子组件收：

<template>
  	<div class="hello" id="HelloWorld">
		子收：
		<p>{{msg3}}</p>
	</div>
</template>

子组件的xport default{}中

props: {
    msg3:String
  },

最终实现的功能就是，在父组件中的input中的 输入内容会在子组件的p标签里收到，之后因为调用了子组件，所以最后会显示到页面。
     总的来说，在父组件中双向绑定一个数据massage2，然后在子组件的xport default{}中定义一个接收数据的msg3，然后在父组件调用子组件HelloWorld（我的子组件名）并设置接口   :msg3=“message2”  去接收父组件的massage2的数据，就这样数据就会到了子组件。由于调用了子组件，所以子组件的内容会显示到页面上。（可能会有点绕，如果看不懂，可以私信我，我可以免费的讲解）。
最终效果：


因为是input，所以数据会实时同步。
好了，今天重头戏来了，子传父。是不是有些小期待呢？好的，我们这就开始，还是先搞代码，你先看着，之后我在讲解。
首先子组件：

<template>
  	<div class="hello" id="HelloWorld">
		<span>{{zz}}</span>
    	<input type="button" value="点击触发" @click="childClick">
	</div>
</template>

子组件:

export default {
  name: 'HelloWorld',
  data(){
    return{
      zz: '我是子组件的数据',
    }
  },
  methods:{
    childClick(){
       this.$emit('childByValue', this.zz)
    }
  }
 }

之后，父组件：

<template>
  	<div id="app">
  		<hello-world
      		v-on:childByValue="childByValue"
    	/>
    	<span>父组件的展示:{{name}}</span>
  	</div>
</template>

父组件：

import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    // 写组件
    HelloWorld,
   },
   data(){
    return{
      name: 'xxx'
    },
    methods:{
    //写事件
     childByValue: function (zz) {
        this.name = zz
      }
  }
 }

讲解来了：
     首先，在子组件，写数据 zz：“我是子组件的数据”，之后写事件childClick，childByValue是在父组件on监听的方法，第二个参数this.zz是需要传的值，他俩前边的呢个this.$emit()是子组件向父组件传值的方法。给input改写成的button按钮 绑定childClick事件。父组件写初始数据name：“xxx”，并在span标签中展示数据。接着在父组件写childByValue事件，zz就是传过来的值。紧接着，在父组件调用hello-world组件，并绑定childByValue，一个on的方法监听子组件。这就和上边相对应了。

初始展示：

点击按钮后，子组件传的数据：

由于篇幅原因，子传子就改日再写，再说一个小的知识点，作为补偿。一个关于vue中img的两种渲染方法。
第一种：

<img alt="Vue logo" :src="imgs">

数据写法1：

imgs:require("./assets/logo.png"),

第一种就是普通的渲染，切记要再路径前边加上require。
第二种：

<img :src="imgs2" alt="Vue logo">

数据写法2：

import vuelogo from './assets/logo.png'

data（）{
	return{
		imgs2:vuelogo,
	}
}

第二种是把路径当组件一样引入并起个名，然后在写数据的呢，调用这个组件名。
     生活告诉我们，这个世界从来不存在完美的人和事，过于完美的感情，只发生在童话和想象中，现实的常态，除了平淡，就是千疮百孔与劫后重生。