【vue】props父子传值，v-on和v-bind和v-model

子组件：定义了一个props为age

<template>
  <div>
      <h1>user-edit</h1>
      <h1>年龄{
   
   {age}}[子组件]</h1>
  </div>
</template>

<script>
export default {
    name:'UserEdit',
    props:{
        age:{
            type:Number
        }
    }
}
</script>

<style>

</style>

父组件：

在父组件中引用了子组件，并修改值，子组件就会跟着变动

<template>
  <div>
      <h1>欢迎{
   
   {admin.username}}成功登录系统[父组件]</h1>
      <UserEdit :age="age"></UserEdit>
  </div>
</template>

<script>
import UserEdit from '@/components/user-edit';
export default {
    name:'Index',
    data(){
        return{
            admin:'',
            age:20
        }
    },
    components:{
        UserEdit
    }
}
</script>

<style>

</style>

• v-on可以用@代替，一些事件比如click和keyup-enter，绑定的方法可以写在methods中，方法内部通过this关键字访问定义在data中的数据 
• v-bind可以用：代替，动态绑定v-bind:src 、v-bind:href 、v-bind:class，通常跟的是属性名
• v-model在表单中常用，监听用户的输入事件来更新数据，如图：

 代码实现：

<template>
  <div>
      <h1>user-edit</h1>
      <input type="text" v-model="message">
      <h2>{
   
   {message}}</h2>
  </div>
</template>

<script>
export default {
    name:'UserEdit',
    props:{
        message:{
            type:String
        }
    },
    data(){
        return{
            message:''
        }
    }
}
</script>

<style>

</style>