精华内容
下载资源
问答
  • Vue 组件 props

    2018-07-19 09:30:48
    技术QQ交流群:294088839 <!DOCTYPE html> <html lang="en"> <head&...Vue 组件 props</title> <script type="tex

    技术QQ交流群:294088839

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue 组件 props</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
    </head>
    <body>
    <h1>Vue 组件 props</h1>
    <hr>
    <div id="app">
        <whl here="河南">
    
        </whl>
        <whl v-bind:here="message">
    
        </whl>
    </div>
    
    </body>
    </html>
    <script>
    
        var app = new Vue({
            el:'#app',
            data:{
                message:'四川'
            },
            //局部组件 如果属性中 有 -  例如 from-here 这样写法 在Vue中需要改成小驼峰的格式 fromHere 就可以认识
            components:{
                'whl':{
                    template:`<div style="color:green"> 我是从{{here}}来的</div>`,
                    props:['here']
                }
            }
        });
    
    </script>
    展开全文
  • Vue组件 props

    2019-09-23 19:32:43
    组件Vue最强大的功能之一;组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用;任何页面都可以抽象为组件树; <!-- 组件需要注册后才能使用。 注册有全局注册和局部注册两种方式 全局注册:...

    组件是Vue最强大的功能之一;组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用;任何页面都可以抽象为组件树;

    <!--
    组件需要注册后才能使用。
    注册有全局注册和局部注册两种方式
    全局注册:
    全局:
    局部注册:
    局部: 注册后的组件只是在该作用域下有效

    父组件正向的向子组件传递数据和参数 用 props
    props的值 可以是两种
    1,字符串数组 props:['message']
    2,对象 props: {}
    props中的数据来自父元素。data中的数据来自组件自己的数据。
    两种数据都可以在computed,methods,template中使用

     

    单项数据流
    父组件将改变后的数据传递给子组件,反过来是不行的。

    业务中需要改变props的情况
    1,父组件传递初始值进来,子组件将他作为初始值保存起来,
    在自己的作用域下面随意修改和使用。
    props:['msg'],
    data() {
    return {
    message: this.msg;
    }
    }
    2,props作为需要被改变的原始值传入可以使用计算属性
    props:['msg'],
    computed: {
    message() {
    return this.msg;
    }
    }


    由于HTML 不区分大小写,当使用DOM模板时候。骆峰命名的props的名称
    转为短横线分隔符
    showText ==> show-text

     

     

    当DOM作为模板时会受到HTML的一些限制,
    因为Vue浏览器解析和标准化HTML后才能获取模板内容
    以下来源不会受限制:
    1,<script type="text/x-template">
    2, JS 内联模板字符串
    3, .vue组件

    如果限制了:方案使用is
    <table>
    <my-component></my-component>
    </table>

    <table>
    <tr is="myComponent"></tr>
    </table>
    -->

     props数据验证 

    //
    /**
    * 数据验证的type类型可以是
    * String,
    * Number,
    * Boolean,
    * Object,
    * Array,
    * Function
    * type也可以是一个自定义的构造器,使用instanceof 检测
    *
    * 当prop验证失败的时候,在开发版本下会在控制台抛出一条警告
    *
    */
    props: {
    //数据验证
    name: String, //字符串类型
    age: [String, Number], // 必须是字符串或者数组类型
    propB: {
    // 布尔值 如果没定义,默认是true
    type: Boolean,
    default: true
    },
    propC: {
    //数组而且是必传
    type: Number,
    required: true
    },
    propD: {
    //如果是数组或者对象,默认值必须是一个函数来返回
    type: Array,
    default: function() {
    return [];
    }
    },
    propF: {
    // 自定义一个验证函数
    validator: function(value) {
    return value > 10;
    }
    }
    },

     

     

     

    转载于:https://www.cnblogs.com/niusan/p/10390208.html

    展开全文
  • 主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 组件 props 和event

    2017-09-04 15:25:00
    组件通过props向子组件传递数据,子组件通过事件events给父组件发送消息。 组件实例的作用域是孤立的 props是单向绑定的:当父组件的属性变化时,将传递给子组件,但是不会反过来。这是为了防止子组件无意修改父...

    组件是可扩展的HTML元素,封装可重用的代码。

    使用祖册的组件,要确保在初初始化根实例之前注册组件

    注册的组件中,data必须是函数

    父组件通过props向子组件传递数据,子组件通过事件events给父组件发送消息。

    组件实例的作用域是孤立的

    props是单向绑定的:当父组件的属性变化时,将传递给子组件,但是不会反过来。这是为了防止子组件无意修改父组件的状态;每次父组件更新时,

    子组件的所有props都会更新为最新值,这意味着你不应该在子组件内部改变prop,如果你这么做了,Vue会在控制台给出警告

    为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:

    1. prop 作为初始值传入后,子组件想把它当作局部数据来用;

    2. prop 作为初始值传入,由子组件处理成其它数据输出。

    对这两种原因,正确的应对方式是:

    1. 定义一个局部变量,并用 prop 的值初始化它:

      props: ['initialCounter'],
      data: function () {
      return { counter: this.initialCounter }
      }
    2. 定义一个计算属性,处理 prop 的值并返回。

    props: ['size'],
    computed: {
    normalizedSize: function () {
    return this.size.trim().toLowerCase()
    }
    }

    注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态

    非 Prop 属性

    所谓非 prop 属性,就是它可以直接传入组件,而不需要定义相应的 prop

    明确给组件定义 prop 是传参的推荐方式,但组件的作者并不总能预见到组件被使用的场景。所以,组件可以接收任意传入的属性,这些属性都会被添加到组件的根元素上。

    例如,第三方组件 bs-date-input,当它要和一个 Bootstrap 插件相互操作时,需要在这个第三方组件的 input 上添加 data-3d-date-picker 属性,这时可以把属性直接添加到组件上 (不需要事先定义 prop):

    <bs-date-input data-3d-date-picker="true"></bs-date-input>

    添加属性 data-3d-date-picker="true" 之后,它会被自动添加到 bs-date-input 的根元素上

     

    转载于:https://www.cnblogs.com/xiaofenguo/p/7473806.html

    展开全文
  • 前言 转载:https://www.cnblogs.com/Rosicky-707/p/11543806.html 示例 refArr: { type: Array, default: () => { return [] } }, refFun: { type: Function, default: () => () =>...}

    前言

    转载:https://www.cnblogs.com/Rosicky-707/p/11543806.html

    示例

    refArr: {
    	type: Array,
    	default: () => {
    	return []
    	}
    },
    refFun: {
    	type: Function,
    	default: () => () => {}
    },
    refObj: {
    	type: Object,
    	default: () => ({})
    }
    
    展开全文
  • 1 refArr: { 2 type: Array, 3 default: () => { 4 return [] 5 } 6 }, 7 refFun: { 8 type: Function, 9 default: () => () => {} 10 }, 11 refObj: { 12 type: Object, ...13 d...
  • vue组件props中异步获取的数据

    千次阅读 2018-05-17 19:26:58
    在使用vue组件时,我们不免使用props获取父组件的数据,对于父组件直接定义的数据,例如: data{ sex: ‘男’, …. } 我们直接使用即可,但是如果我们所需的数据在父组件中是使用异步获取时,尤其我们的组件...
  • 在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化, 遂查看vue文档,得知watch有一种深度监听的方法。 从vue文档搬运。=》 var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e:...
  • Vue组件获取数据数据,子组件第一次props获取不到 一、给值加上sync <el-dialog title="测试" :visible.sync="dialog" width="40%"> <room-Checked @event1="change($event)" :date.sync="date" /> ...
  • 先说问题,父组件利用props向子组件传值,浏览器console有这个值,但是获取不到内部的属性,困了我3个小时,真的** 父组件定义了personal这个值。在父组件接口中给这个值重新赋值。 子组件接受这个值,浏览器console...
  • 组件接收props的方法用数组形式接收传入的props,如: <div id="demo"> <a-cmp :count="count"></a-cmp> </div> <script> const vm = new Vue({ el: '#demo', ...
  • 效果: 转载于:https://www.cnblogs.com/xingyazhao/p/7762261.html
  • props: { demoString: { type: String, default: '' }, demoNumber: { type: Number, default: 0 }, demoBoolean: { type: Boolean, default: true }, demoArray: { type: Array, default: () =
  • 组件使用props向子组件传对象,控制台打印对象有值,但是打印内部的属性显示未定义。 父组件: async getBamboo (date) { this.showNumber = 0; this.showNumber = 1; let parmas = { date: date || '' }; ...
  • 先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的**personalconsole以下为原代码1、home.vue(父组件)--personal是被传的参数:personal="personal">...
  • 前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个...本文将详细介绍Vue组件选项props父子级组件在介绍props之前,先介绍父子级组件的写法在一个良好定义的接口中尽可能将父子组件解耦...
  • 多种类型本节课我们来开始学习 Vue组件 props 参数类型。一.组件props 类型1. 从父组件给子组件通信,子组件不单单可以得到字符串类型,还可以是其它类型;"app"> :v-type="text"> color="green"/> ...
  • 组件的属性和事件父子组件之间的通信父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息。比如,子组件需要某个数据,就在内部定义...
  • 这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的...我就直接从代码上面来进行js代码://子组件中,定义传入的变量的类型等props: {data: {type: Array,require:true},status: {...
  • 前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个...本文将详细介绍Vue组件选项props父子级组件在介绍props之前,先介绍父子级组件的写法在一个良好定义的接口中尽可能将父子组件解耦...
  • Vue组件选项props

    2019-06-25 19:05:18
    Vue组件选项props 前面的话  组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为props down, events up。父组件通过props向下传递数据给子组件...
  • 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
  • 这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,...子组件获取不到值时需要深拷贝我就直接从代码上面来进行js代码://子组件中,定义传入的变量的类型等props: {data: {type: Array,require: ...
  • vue组件选项props

    2018-10-13 11:10:45
    组件接受的选项大部分与vue实例一样,而选项props是组建中非常重要的一个选项。...本文详细介绍vue组件选项props。 父子组件 在介绍props之前,先介绍父子组件的写法。 在一个良好定义的接...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,554
精华内容 3,421
关键字:

vue组件props

vue 订阅