解决vue prop传值default属性如何使用,为何不生效的问题
如果在template中,显示的调用了 prop 属性,那么 default 属性就不会生效
如果在template中,不调用 prop 属性,default 就会生效
default 值有效与否,和 prop 的验证通不通过,没有关系
//声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTitle }}</h3>" }); //在template中,显示调用prop 属性,default不生效 <blog-post :postTitle="54"></blog-post> //在template中,不调用prop 属性,default生效 <blog-post></blog-post>
补充知识:vue prop不同数据类型(数组,对象..)设置默认值
vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array, Function, Object
refAge: { type: Number, default: 0 }, refName: { type: String, default: '' }, hotDataLoading: { type: Boolean, default: false }, hotData: { type: Array, default: () => { return [] } }, getParams: { type: Function, default: () => () => {} }, meta: { type: Object, default: () => ({}) }
以上这篇解决vue prop传值default属性如何使用,为何不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项 声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以
-
Vue props用法详解(小结)
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat
-
Vue组件中prop属性使用说明实例代码详解
Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h
-
解决vue prop传值default属性如何使用,为何不生效的问题
如果在template中,显示的调用了 prop 属性,那么 default 属性就不会生效 如果在template中,不调用 prop 属性,default 就会生效 default 值有效与否,和 prop 的验证通不通过,没有关系 //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTit
-
vue prop传值类型检验方式
prop 传值检验规则 如果是 prop 是静态传值,则必须是 String 类型 如果是 prop 是动态传值,则可以验证任意类型 示例,如果必须要传一个Number,就必须使用 bind //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTitle }}</h3>"
-
解决vue数组中对象属性变化页面不渲染问题
做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数
-
解决vue项目input输入框双向绑定数据不实时生效问题
我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解
-
vue prop属性传值与传引用示例
vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组或对象类型也以值形式传递怎么办呢?如下方式可以实现: // component-A 引用component-B组件 <component-B :person="personList" :personBak="person_Bak"> </component-B> // compone
-
解决vue组件props传值对象获取不到的问题
先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default
-
vue props传值失败 输出undefined的解决方法
如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值: <code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: ['type'], template: '<div @cli
-
Vue Prop属性功能与用法实例详解
本文实例讲述了Vue Prop属性功能与用法.分享给大家供大家参考,具体如下: 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: html: <div id="app-1"> <!-- HTML 中是 keb
-
解决vue attr取不到属性值的问题
js: $(document).ready(function() { $.get("/account/authGroupInfo",{id:groupId}, function(data) { var arr = data.data.rules.split(","); console.log(arr); $.get("/account/allRule",{}, function(result) { ruleList.options = resul
-
解决Vue 给mapState中定义的属性赋值报错的问题
1. 实践环境 Vue 2.9.6 2. 问题描述 <script> import { mapState } from 'vuex'; export default { name: "displayCount", computed: { ...mapState({ ...略 count: state => state.a.count }) }, methods: { increaseCount () { this.count = this.count + 1 } }
随机推荐
- JS 继承实例分析
- js类定义函数时用prototype与不用的区别示例介绍
- 详解angularjs中的隔离作用域理解以及绑定策略
- iOS点击推送消息跳转处理
- JS跨域请求外部服务器的资源
- JavaScript之自定义类型
- ASP .NET 可编辑输入自动匹配的下拉框
- php数组中包含中文的排序方法
- JDK的命令详解
- 解决hibernate+mysql写入数据库乱码
- PHP取余函数介绍MOD(x,y)与x%y
- javascript中类的定义方式详解(四种方式)
- js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
- jQuery中layer分页器的使用
- spring boot与kafka集成的简单实例
- Android编程实现修改标题栏位置使其居中的方法
- Android实现摄像头拍照功能
- Servlet+MyBatis项目转Spring Cloud微服务,多数据源配置修改建议
- layui按条件隐藏表格列的实例
- SQL server数据库创建代码 filegroup文件组修改的示例代码