VueCLI核心知识1：ref属性、props配置、mixin混入-尧图网站建设

1 ref 属性

ref属性类似于js原生获取DOM元素

<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDom">点我输出上方的Dom元素</button><School ref="sch"></School></div>
</template><script>import School from './components/Schoool'export default {name:'App',components:{School},data(){return{msg:'欢迎学习Vue'}},methods: {showDom() {console.log(this.$refs.title)  // 获取导的真实Dom元素console.log(this.$refs.sch)  // School组件的实例对象（vc）console.log(this.$refs) }},}
</script><style></style>

总结：

2 props 配置

2.1 实现父组件向子组件传递信息

1. App组件向Student传递信息

2. Student组件接收，就可以直接使用了。接收方式有3种

<template><div class="student"><h1>{{msg}}</h1><h2>学生姓名： {{ name }}</h2><h2>学生年龄： {{ age + 1 }}</h2><h2>学生性别： {{ gender }}</h2></div>
</template><script>export default {name: 'Student',data() {return {msg:'我是一个学生'}},props:['name','age','gender']  // 1.简单接收// 2.接收的同时对数据进行类型限制// props:{//     name:String,//     age:Number,//     gender:String// },// 3.接收的同时对数据进行类型限制，再加上必要性的限制// props: {//     name: {//         type: String,//         required: true,  //  name 是必要的//     },//     age: {//         type: Number,//         default: 18  // 默认值//     },//     gender: {//         type: String,//         default: '男'//     }// }}
</script><style>.student {color: red;}
</style>