vue 父子组件 定义变量 定义方法

<template>
  <div>
    <h2>父组件的页面的内容</h2>
    <ul>
      <!-- 进行切换子页面，写法同vue.js -->
      <li><nuxt-link to='/parent/child'>child</nuxt-link></li>
      <li><nuxt-link to='/parent/child2'>child2</nuxt-link></li>
    </ul>
    <hr>
    <div class="box">
      <p>嵌套子页面内容区</p>
      <!-- <nuxt-child>标签在父页面组件中相当于是子页面组件的占位符；嵌套中这个不可少 -->
      <!--
      <Child read_only = 'aaa'>
      </Child>
      -->
      <Child :read_only = 'var_in_child' @my_emit='do_my_emit'>
      </Child>
    </div>
    <input v-model= 'var_in_child'/>
  </div>
</template>
<script>
import Child from '@/components/Child'
export default {
  data () {
    return {
      my_value: '默认值',
      var_in_child: 'sss',
    }
  },
  methods: {
    do_my_emit: function(value) {
      console.info("in do_my_emit: value ", value)
      this.var_in_child = value

    }
  },
  components: {
    Child
  }
}
</script>
<style scoped>
.box{
  margin-top: 20px;
  padding: 200px;
  border: 20px solid pink;
  border-radius: 5px;
}
</style>

<template>
  <div style='border: 1px solid red; margin-left: 50px; width: 600px'>

    本页面是child: <br/>

    <!--
    value_in_child: <input type="text" v-model="value_in_child"/>
    -->
    <h2>嵌套子组件中的页面child</h2>
    <p>ss：{{read_only}}</p>
    var_in_input: <input v-model = 'var_in_input'/>
    <input type=submit value= '我要传值' @click="do_my_function"/>

  </div>

</template>
<script>
export default {

  props:['read_only'],
  data () {
    return {
      var_in_input: 'var_in_input',
    }
  },
  methods: {
    do_my_function: function() {
      console.info("sss")
      this.$emit('my_emit', this.var_in_input)
    }
  }


}

</script>
<style scoped>

</style>