VUE组件间参数传递

VUE 组件间参数传递，函数调用，子组件修改主组件数据

A.vue

<template>
  <div>
    <el-row>
      <el-col :span="10">
        <div>我是pageA----这里是pageB传递过来的值---{{text2}}</div>
        <div>
          <el-input v-model="text1"></el-input>
        </div>
      </el-col>
      <el-col :span="10" :offset='4'>
        <pageB v-bind:text1='text1' @Change_input2='change_input2'></pageB>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import pageB from './B.vue'
  export default {
    components: {pageB},
    data() {
      return {
        text1: "",text2: ""
      }
    },
    methods:{
      change_input2(val){
        this.text2 = val
      }
    }
  }
</script>

B.vue

<template>
  <div>
    我是pageB --- 这里是PageA传递过来的值---{{text1}}
    <el-input v-model="text2" @input='input_change'></el-input>
  </div>

</template>

<script>
  export default {
    props: ['text1'],
    data() {
      return {text2: ''}
    },
    methods:{
      input_change(){
        this.$emit('Change_input2',this.text2)
      }
    }
  }
</script>

<style>
</style>

效果图：

样例下载地址