vue 组件 props配置

props 配置用于接收外部传入的属性

props 是只读的若强行修改控制台会报错

<template><div><StudentTest name='李四' sex='男' :age='18'/></div>
</template><script>import StudentTest from './components/Student.vue'export default {name: 'AppTest',components: {StudentTest},}
</script>

<template><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2><h2>学生性别：{{sex}}</h2><h2>学生其他信息：{{msg}}</h2></div>
</template>
<script>export default {name: 'StudentTest',data(){return {msg: '嘿嘿嘿嘿嘿哈哈哈哈哈'}},// 方式一：只指定属性名// props:['name', 'age', 'sex']  // 方式二：指定属性名和类型// props: {//     name: String,//     age: Number,//  sex: String// }// 方式三：指定属性名 类型 是否必填 默认值props: {name: {   //属性名type: String,  //类型required: true  //是否必须传入},sex: {type: String,required: true},age: {type: Number,default: 18 //默认值}}}
</script>

props优先级大于data

当data和props中同时指定相同属性时虽然控制台会报错但是页面显示的是 props获取到的值这样可能不太严谨

data 中的属性可以得到props中传入的值

<template><div class="school"><h2>学生姓名：{{dataName}}</h2></div>
</template>
<script>data(){return {dataName: this.name}},props: {name: {  //属性名type: String,  //类型required: true  //是否必须传入}}
</script>

vue 组件 props配置相关推荐

css获取vue组件 props
一.在 CSS 中,无法直接获取 Vue 组件的 props 值.CSS 是用于描述样式的语言,而 Vue 组件的 props 是在 JavaScript/TypeScript 中进行处理和传递的.C ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
vue组件通信1：父传子（props）
一,前言 1.props用于父子组件的通信. 2.props具有单向下行绑定,由父组件传递给子组件. 二,子组件props声明 1.props是Vue Option Api的一个选项,声明该组件接受父 ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
Vue——props配置
文章目录需求 props配置 props配置简单接收--数组形式 props配置接收--对象形式 props配置接收--对象形式2 props配置分析 props的优先级需求一个展示学生信息的组 ...
vue路由router的props配置
vue路由router的props配置前置知识:vue-router3路由配置和使用,适配vue2,vue-router代码模版路由props配置的作用:让路由组件更方便的接收到参数 ⚠️ 当不使 ...
VUE组件：组件的数据传递（props）
组件的数据传递 props的作用使用props流程 ①给组件添加props选项 ②在调用组件时传入实际参数即可 ③完整代码及效果 ④使用props传递分析使用props传递数据时的一些细节 ①传参 ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

vue 组件 props配置

props 配置用于接收外部传入的属性

props 是只读的若强行修改控制台会报错

props优先级大于data

data 中的属性可以得到props中传入的值

vue 组件 props配置相关推荐

最新文章

热门文章

vue 组件 props配置

props 配置 用于接收外部传入的属性

props 是只读的 若强行修改控制台会报错

props优先级大于data

data 中的属性 可以得到props中传入的值

vue 组件 props配置相关推荐

最新文章

热门文章

props 配置用于接收外部传入的属性

props 是只读的若强行修改控制台会报错

data 中的属性可以得到props中传入的值