Vue组件传参prop向下传递、emit向上传递指南

父组件里面:<HelloWorld msg="Welcome to Your Vue.js App"/>
--------------------------------------------------------------------
子组件里面:
<script>
export default {
  name: 'HelloWorld',
//父组件App.vue传给子组件HelloWorld的数据
//谁使用了这个页面就给这个组件传值
  props: {
    msg: String
  }
}
</script>

//然后将要传递的值放在template里面的h1里面去做展示
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

 <HelloWorld msg="父亲组件App 子组件HelloWorld"/>

<template>
    <div>
        <button type="button" @click="btn()">TestVue</button><br>
        {{ content }}
    </div>    
</template>


<script>
//这里不使用vue2的语法
export default ({
    //定义父组件传递给子组件的数据，属性名字为content，类型为string
    data() {
        return{
        }
    },
    methods:{
        //在js当中使用props数据
        btn(){
            alert("content内容为:" + this.content)
        }
    },
    props:{
        content: String,
    }
})
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Test content="父亲组件App 子组件Test"></Test>
  <HelloWorld msg="父亲组件App 子组件HelloWorld"/>
</template>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld/>
  <Test :msgTest="inputresult"></Test>
  <div>
    <input v-model="inputresult">
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Test  from './components/Test.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
    Test
  },
  data(){
    return{
      inputresult: ""
    }
  }
}
</script>



<template>
   <div class="box">{{ msgTest }}</div>
</template>



<script>
  export default {
    data(){
      return {

      }
    },
    props:{
      msgTest: String
    }
  }
</script>


<style scoped>
   .box{
       width: 100px;
       height: 100px;
       background-color: cadetblue;
   }
</style>

<template>
    <div>
        <button type="button" @click="btn()">子传父按钮</button><br>
    </div>    
</template>


<script>
//这里不使用vue2的语法
export default ({
    //定义父组件传递给子组件的数据，属性名字为content，类型为string
    data() {
        return{

        }
    },
    methods:{
        btn(){
            //vue自带的emit事件，将数据传递给父组件
            //第一个参数是事件名，第二个参数是数据名称
            this.$emit('childEvent',"子组件事件childEvent传来的数据")
        }
    },
    props:{

    }
})
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!--监听子组件childEvent事件，绑定receive方法接受子组件传过来的参数，
    然后就是赋值操作，赋值完之后在模板里面显示
  -->
  <Test @childEvent="receive"></Test><br>
  <p style="color:brown">子组件Test传来的数据:{{ TestMsg }}</p>
  <HelloWorld  msg="父亲组件App 子组件HelloWorld" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      TestMsg: ''
    }
  },
  methods:{
    receive(data){
      alert(data)
      this.TestMsg = data
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>