<template>
 <div>
     //必须写引号 加冒号才能传数字
  <Student name="李四" sex="女" :age="18"/>
 </div>
</template>

<script>
 import Student from './components/Student'

 export default {
  name:'App',
  components:{Student}
 }
</script>

<template>
	<div>
		<h1></h1>
		<h2>学生姓名：</h2>
		<h2>学生性别：</h2>
		<h2>学生年龄：</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个尚硅谷的学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>

<template>
	<div>
		<h2 @click="showName">学校名称：</h2>
		<h2>学校地址：</h2>
	</div>
</template>

<script>
	//引入一个hunhe
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
				x:666 //覆盖了100
			}
		},
		mixins:[hunhe,hunhe2],
	}
</script>

<template>
 <div>
     <!-- 过滤器 -->
  <h2>学校名称：</h2>
  <h2>学校地址：</h2>
  <button @click="test">点我测试一个hello方法</button>
     
    <h2>学校名：</h2>
	<input type="text" v-fbind:value="name">
 </div>
</template>

<script>
 export default {
  name:'School',
  data() {
   return {
    name:'尚硅谷atguigu',
    address:'北京',
   }
  },
  methods: {
   test(){
    this.hello()
   }
  },
 }
</script>

<style scoped>
 .demo{
  background-color: skyblue;
 }
</style>

<template>
  <div id="App">
<!--    通过props让子组件给父组件传值-->
    <School :SendMsgToApp="getMsg"></School>
    <button></button>
  </div>
</template>

<script>
import School from "./src/School";
export default {
  name: "App",
  components: {School},
  data(){
    return{
      getmsg:'',
    }
  },
  methods:{
    getMsg(msg){
      this.getmsg=msg;
      console.log(msg)
    },
  }

}
</script>

<style scoped>

</style>

<template>
  <div>
    <p></p>
    <button @click="SendMsg">点击获取</button>
  </div>
</template>

<script>
export default {
  name: "school",
  props:['SendMsgToApp'],
  data(){
    return{
      sendmsg:"hhaha",
    }
  },
  methods:{
    SendMsg(){
      this.SendMsgToApp(this.sendmsg)
    },
  }
}
</script>

<style scoped>

</style>

<template>
  <div id="App">
<!--    通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on）-->
    <School @test="testget"></School>
  </div>
</template>

<script>
import School from "./src/School";
export default {
  name: "App",
  components: {School},
  data(){
    return{
      getmsg:'',
    }
  },
  methods:{
    //school传来的参数
    testget(name,...params){
      console.log('App收到了学生名：',name,params)
      this.studentName = name
    }
  }

}
</script>

<style scoped>

</style>

![$emit子传父](../images/front/vue/$emit子传父.png)<template>
  <div>
    <p></p>
    <button @click="SendMsg">点击获取</button>

    <p>点击出发@test把子组件数据传给父组件</p>
    <button @click="testT">test</button>
  </div>
</template>

<script>
export default {
  name: "school",
  data(){
    return{ 
      name:'soup',
    }
  },
  methods:{
    //通过点击@click后触发该函数，获取该组件vc对象即可传递到该使用该组件自定义事件传的值
    testT(){
      this.$emit("test",this.name,666,888,900)
    }

  }
}
</script>

<style scoped>

</style>