精华内容
下载资源
问答
  • Vue中props用法

    2021-11-23 22:31:51
    ​ 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据。 实例演示:...

    ​ 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据。

    实例演示:

    子组件:

    <template>
      <div>
        <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}}
      </div>
    </template>
    
    <script>
    export default {
        name:'Cpn',
        // 简单接收
        /* props:['age','hobby','name'], */
        // 声明要接收的数据,声明时对接收的数据进行限制
        props:{
            name: {
                // 声明类型
                type:String,
                //声明是否必需
                require:true,
                // 声明默认值
                default:'默认值'
            },
            age:{
                type:Number,
                require:true,
                default:18
            },
            hobby:{
                type:String,
                require:false
            },
            flag:{
                type:Boolean,
                require:false
            }
        }
    }
    </script>
    

    父组件:

    <template>
      <div id="app">
        <!-- <cpn name='李明' age="22" hobby="打球"></cpn>
        <cpn name="小红" age="20" hobby="弹琴"></cpn> -->
        <cpn name='李明'></cpn>
        <cpn hobby="编程" :flag="flag"></cpn>
          <!--备注:如果要将当前组件data里的数据传递给子组件,需要通过v-bing:变量名=”变量名“的形式传递,如果传递的不是data里面的数据,就不用加绑定指令,即v-bind(可简写为:)-->
        <button @click="changeFlag">切换</button>
      </div>
      
    </template>
    
    <script>
    import Cpn from './components/Cpn.vue'
    
    export default {
      components: { Cpn },
      name: "App",
      data() {
        return {
          flag:false
        }
      },
      methods: {
        changeFlag(){
          console.log(this.flag)
          this.flag=!this.flag;
          console.log(this.flag)
        }
      },
    }
    </script>
    
    

    运行上面的程序可以看到,当我们通过点击父组件的按钮切换某个值时,子组件接收的值也会相应变化。

    子组件接收父组件的数据有两种接收方式:

    • 方式1:简单接收, 只需要给出所要接收的变量的名字即可
    • 方式2: 具体接收,给每个接收的变量选择性地指明数据类型,是否可为空,默认值

    本次分享到这,下期见!!!

    展开全文
  • Vue props的异步传递

    2021-10-20 14:44:52
    // 父组件 修改id data() { return { age: 0 } } methods: { send(){ this.age++ console.log('我的年龄是' + this.age) // 1 console.log(this.$refs.myson.age) // 0 } } //子组件 props: { age: { type: ...
    // 父组件
    <son ref="mySon" :age="age" />
    <button @click="sned">修改id</button>
    data() {
      return {
        age: 0
      }
    }
    methods: {
    	send(){
    		this.age++ 
            console.log('我的年龄是' + this.age) // 1
    		console.log(this.$refs.myson.age) // 0
    	}	
    }
    //子组件
    
     props: {
        age: {
          type: Number,
          required: true
        }
      },

    如果需要获取同步之后的最新的props数据,要使用$nextTick()

    // 父组件
    <son ref="mySon" :age="age" />
    <button @click="sned">修改id</button>
    data() {
      return {
        age: 0
      }
    }
    methods: {
    	send(){
    		this.age++ 
            console.log('我的年龄是' + this.age) // 1
    		this.$nextTick( () => {
                console.log(this.$refs.myson.age) // 1
            })
    	}	
    }
    //子组件
    
     props: {
        age: {
          type: Number,
          required: true
        }
      },

     

    展开全文
  • vue中props的用法

    2021-09-11 09:44:36
    vue使用props的用法 日常编程中都会用到父组件用子组件、子用父的情况,下面先介绍一种子传父的情况 1、在父组件 (1)、首先是在其定义一个list属性以存储其数据值 (2)、定义一个绑定属性“mlist”,以为后续props...

    vue使用props的用法
    日常编程中都会用到父组件用子组件、子用父的情况,下面先介绍一种子传父的情况
    1、在父组件中
    (1)、首先是在其定义一个list属性以存储其数据值
    (2)、定义一个绑定属性“mlist”,以为后续props做铺垫,

    <template>
      <div class="hello">
        <h2>我是父组件,我需要建立一些参数</h2>
        <span><mHome :mlist="list"/></span>
      </div>
    </template>
    
    <script>
    import mHome from "@/views/Home.vue";
    export default {
      components: {
        mHome,
      },
      data() {
        return {
          list: ["小米", "华为", "苹果", "三星"],
          msg:'武汉'
        };
      },
    };
    </script>
    

    2、在子组件中
    (1)先定义props属性,将其父组件所传递的“mlist”属性传输过来(要与父组件定义的名称保持一致)
    (2)循环遍历其props的属性,以便展示到其页面中

    <template>
      <div class="home">
        <h1>我是子组件</h1>
        <h2>请输入相关手机型号</h2>
        <span v-for="(item, index) in mlist" :key="index">{{ item }}</span>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    export default {
      props: ["mlist"],
    };
    </script>
    
    

    3、效果图展示
    在这里插入图片描述

    总结:
    1、注意其props所使用的名称与父组件绑定的属性名称保持一致
    2、步骤:在父组件引入子组件的页面 =》子组件中定义props之后直接使用数据即可

    展开全文
  • Vue中props属性

    2021-11-30 14:25:55
    props功能:让组件接受外部传过来的数据 (1):传递数据:<Demo name="xxx"/> (2):接受数据: 第一种:(只接收):props: ['name'] 第二种:(限制类型):props:{ name:Number } 第三种:(限制...

    props功能:让组件接受外部传过来的数据

    (1):传递数据:<Demo name="xxx"/>

    (2):接受数据:

            第一种:(只接收):props: ['name']

            第二种:(限制类型):props:{  name:Number }

            第三种:(限制类型,限制必要性,指定默认值):

                    

    props: {
        name: {
            type: String,
            required: true, 
            default: 'hhh'
        }
    }

    备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,

            若业务需求确实需要修改,那么请复制props的内容在data中声明一份,然后去修改data

            中的数据。


    在URL中props的传参

    第一种写法:props值为对象,该对象中所有的key-value的组合

            最终都会通过props传给Wea组件

    props: {id:123456}

     第二种写法:props值为布尔值 true,则把路由收到的所有params

                    参数通过props传过去

    第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传过去

    {
        path: '/wea/:id',
        name: 'Wea',
        component: Wea,
        props:function(route){
          console.log(route);
          return {
            id:route.params.id,    //params 指的是 / 中的参数
            liangzai:route.query.liangzai   // query 指的是 ? 后的参数
          }
        },
      },
    
    
    或写成
        props(route){
          return {
            id:route.params.id, 
            liangzai:route.query.liangzai
          }
        },

     

     

    展开全文
  • Vue中props的详解

    千次阅读 2020-12-23 07:23:28
    父组件的数据需要通过 prop 才能下发到子组件。也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不能直接在模板里面渲染父元素...
  • vue中props传值方法

    千次阅读 2021-01-14 06:37:51
    vue中props传值方法1.开发环境 vue2.电脑系统 windows10专业版3.在使用 vue开发的过程,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!4.在父组件添加如下代码:我是echarts模板封装import ...
  • 关于Vue中props的详解

    千次阅读 2021-01-14 06:37:49
    父组件的数据需要通过 prop 才能下发到子组件.也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不能直接在模板里面渲染父元素的...
  • Vue中子组件不能直接引用父组件的数据,需要通过props选项接收来自父组件的数据。
  • Vue中props的详解看一下官方文档:组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件。也就是props是子组件访问父组件数据...
  • VUE3.0,DAY45基础案例当APP.vue中的标签被多次使用当别人想用我的组件传数据时,使用props传递的参数类型问题props配置的第二种写法props的第三种写法 基础案例 我们写一个基础的案例便于分析,创建一个vue脚手架,...
  • vue中props的默认写法

    2021-04-13 16:05:47
    vue中props的默认写法 props: { // 字符串 stringType: { type: String, default: () => '' }, // 数值 numberType: { type: Number, default: 0 } // 布尔值 booleanType: { type: Boolean, ...
  • 假如接收props的组件存在多实例,在设置默认值时如果不使用工厂函数,其因为数组和对象是引用类型的数据,所以可能会导致在某一个实例修改数据,影响到其他实例的数据。这和data为什么是函数的本质是一样的。 ...
  • 2.在子组件使用props声明要引用哪个值 3.标签使用 4.在template模板,要使用划线写法;在script脚本使用小驼峰 props的使用: 1.静态props 静态即传入的值不变化,直接在父组件定义,子组件使用 2....
  • vue框架中props的typescript用法详解

    千次阅读 2020-12-29 06:09:07
    vue框架中props的typescript用法详解什么是typescripttypescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module...
  • 使用 Props 传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要...
  • vue3 props用法

    2021-10-21 15:42:36
    父组件:index.vue <template> <div> <child1 :name="name" title="标题一"/> </div> </template> <script> import { ref } from 'vue' // 导入子组件 import child1 from '...
  • vue中props的基本使用

    2021-07-24 15:07:20
    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。 不要在...
  • 前言: 对vue3.0的学习以及对...一、vue2.0中props的用法 1、父组件 a.vue中 template: <b :list='mmm'><b> import b from './b.vue' components: { b }, data() { return { mmm: { ...
  • 今天我想在声明Props中属性的类型,既想是String类型,也想为Number类型。 解决: 怪我自己学Vue太浅,没怎么去看官网,查了一下官网用数组即可解决,例如:type: [Number,String]。 参考官网 ...
  • vue中使用props传值的方法

    千次阅读 2021-01-30 13:38:25
    1.静态传值(在父组件中赋值好props中属性的值传递给子组件)父组件import child from './components/child.vue'export default{components:{child}}子组件{{message}}export default{props:['message'],data(){},...
  • 如前所述,vue组件props是组件公有属性,对外;data是组件的私有数据,对内。正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值。当然,改也可以改,但运行时刻会有...
  • props: { stringProps: { type: String, default: '' }, numberProps: { type: Number, default: 0 }, booleanProps: { type: Boolean, default: true }, arrayProps: { type: Array, defaul...
  • vue3.0 props参数验证

    2021-05-21 14:49:37
    vue3里面,可以添加类型约束,向下兼容2.5版本的写法 props:{ 传递参数,可以直接添加类型约束 msg:String, age:String }, 代码示例: props: { //传递参数,可以添加类型约束 msg: String, age:String }, ...
  • 这些方法主要是在这次做项目的过程发现总结的来的,感觉也挺常用的,所以就简单的...我就直接从代码上面来进行js代码://子组件,定义传入的变量的类型等props: {data: {type: Array,require:true},status: {...
  • Vueprops验证

    2021-10-07 17:33:43
    <!... <... <head> ...meta charset="utf-8">...script src="libs/vue.js"></script> </head> <body> <div id="app"> <label>n:<input type="text" v-mo
  • vue官方文档这么写的: // 带有默认值的对象 propE: { type: Object, // 对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: ‘hello’ } } }, 但是我在使用这个方法之后没有报错...
  • vue3.0 props组件传参

    2021-10-15 15:03:45
    setup 函数的第一个参数是 props。正如在一个标准组件所期望的那样,setup 函数props 是响应式的,当传入新的 prop 时,它将被更新。 context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这...
  • render (h) { ... // Component props props: { msg: 'hi', onCustomEvent: this.customEventHandler }, // normal HTML attributes attrs: { id: 'foo' }, // DOM props domProps: { innerHTML: 'b

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 104,399
精华内容 41,759
关键字:

vue中的props是什么

vue 订阅