vue父子页面传值

1.props 传值

 

//父组件 传递参数到自组件
<template>
 <div>
   <my-vue :name="name" :age="age"></my-vue>   //:name="name" 传递name的值到子组件
 </div>
</template>
<script>
import MyVue from '@/compnent/myvue'; //引入子页面
export default{
   data(){
   return {
     name:"wangwang",
     age:18
   }
  },
 components:{
  "my-vue":MyVue //vue对驼峰大小写不区分
 }
}
</script>
<style>

</style>

//子组件接收参数
<template>
 <div>
   我是子组件
 </div>
</template>
</template>
<script>
export default{
   data(){
   return {
   
   }
  },
 props:{  //props 也可以是数组形式 props:["name","age"]
   name:{
    type:String
  },
   age:{
   type:String,
   default:18
   }
 },
 watch:{
  name:function(oldval,newval){
    //newval 取到值可以进行一些逻辑开发，比如根据name 请求后台接口
  },
   age:function(oldval,newval){}

 },
 components:{
 
 }，
}
</script>
&