一.props一般用于父子组件通信
1.只接收值
props:["name","age"],
2.约束类型
props:{
name:String,
age:Number
},
3.约束类型,必要性,指定默认值
props:{
name:{
type:String,
required:true,
default:"李四"
},
age:{
type:Number,
required:false,
default:100
}
二.组件规则
1.向外暴露的名称需要使用驼峰命名(推荐使用),使用-连接
2.导入组件时,取的名称最好暴露的名称一致,名称可以任意定义(不推荐)
3.但凡注册了组件,必须使用组件例:
export default { name: 'App', components: { // HelloWorld, // "aaa":HelloW, // stutend, MyDay01 }, data() { return { // msg:"我是测试的元素111111111", // msgs:"我是测试的元素22222222" ages:20, } }, methods: { // func1(){ // console.log(this.$refs); // // 1.给元素设置ref,获取的是Dom // // console.log(this.$refs.newRef.style.color); // // console.log(this.$refs.newRef.className); // // console.log(this.$refs.newRef.title); // // 给组件设置ref,获取的是vc // console.log(this.$refs.stuRef.userName); // } },
三. 自定义事件
例:
template> <div> <h1>我是day03组件</h1> <button @click="btn()">提供自定义事件</button> <h1>{{ userName }}</h1> <h1>{{ age }}</h1> </div> </template> <script> export default { name:"MyDay03", props:["age"], data() { return { userName:"张三", // age:"小红" ids:99, str:"我是自定义事件点击" } }, methods:{ btn(){ this.$emit("wq",this.userName) this.$emit("zpj",this.ids) this.$emit("click") } }, // created(){ // this.$emit("wq",this.userName) // } } </script>