修改默认配置:使用vue > output.js 可以查看到Vue脚手架的默认配置。在vue.config.js中进行修改。
eg:lintOnSave:false //关闭语法检查
脚手架文件结构:
ref属性:被用来给元素或子组件注册引用信息(id的替代者)
ref属性应用在html标签上,获取是真实的DOM元素。应用在组件标签上,获取的是组件实例对象vc。
使用方法:标签内命名ref = "xxx" 使用this.$refs.xxx进行获取
props配置项:让组件接受外部传入的数据
① 传递数据:<Demo xxx="xxx" />
② 接收数据:
1.仅接收数据:
// 简单声明接收, props: ["name", "sex", "age"],
2.限制类型接受:
// 接收同时对数据进行类型限制 props: { name: String, age: Number, sex: String, },
3.限制类型,设置默认值,限制必要性:type、default、required
// 接收的同时对数据进行类型限制+默认值指定+必要性限制 props: { name: { type: String, required: true, //名字是必填项 }, age: { type: Number, default: 99, // 默认值 }, sex: { type: String, required: true, }, },
整体流程:
----------App.vue------------- <template> <div> <Student name="LWH" :age="18" sex="男" /> </div> </template> .... ---------Student.vue------------ <script> export default { ...... // 简单声明接收, props: ["name", "sex", "age"], }; </script>
备注:props属性是只读的,Vue底层会监测对props的修改,若进行修改会发出警报。若业务需要修改,则需复制props中的属性至data中,直接使用复制后的属性并对其进行操作。
标签:vue,name,前端,sex,Vue2,props,Day53,type,String From: https://www.cnblogs.com/LWHCoding/p/16800371.html