精华内容
下载资源
问答
  • vue中props传值方法1.开发环境 vue2.电脑系统 windows10专业版3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!4.在父组件添加如下代码:我是echarts模板封装import ...

    vue中props传值方法

    1.开发环境 vue

    2.电脑系统 windows10专业版

    3.在使用 vue开发的过程中,我们经常会使用 props进行组件的传值,下面是我的分享,希望对你有所帮助!

    4.在父组件添加如下代码:

    我是echarts模板封装

    import Eche from '@/components/vueechartsmo.vue'

    export default {

    name:'eche',

    components:{

    Eche

    },

    data(){

    return{

    name:'灰太狼'

    }

    }

    }

    5.在子组件中添加如下代码://接受父组件 传过来的值:

    props: ["dataObj"],

    data() {

    return {};

    },

    //注意:props和data是同级的

    5-1.子组件全部代码如下:

    我是子组件

    {{ dataObj }}

    import echarts from "echarts";

    export default {

    name: "echartsmo",

    props: ["dataObj"],

    data() {

    return {};

    },

    created(){

    },

    }

    //在子组件中添加 props,接受 父组件的值

    6.在 template使用props传过来的值,代码如下:

    {{ dataObj }}

    6-1.效果如下:

    7.在生命周期中,怎么输出 props 的值呢?代码如下:mounted() {

    console.log(this.dataObj);

    },

    7-1.效果如下:

    8.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

    展开全文
  • Vue中props的详解

    2020-10-16 23:47:49
    主要介绍了Vue中props的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue中props的使用详解

    2020-08-27 08:28:28
    props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下
  • 主要帮助大家简单的理解vue中Props属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这篇文章主要帮助大家简单的理解vue中Props属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的。...

    这篇文章主要帮助大家简单的理解vue中Props属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下

    使用 Props 传递数据

    组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

    “prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props:

    Vue.component('child', {

    // 声明 props

    props: ['msg'],

    // prop 可以用在模板内

    // 可以用 `this.msg` 设置

    template: '{{ msg }}'

    })

    然后向它传入一个普通字符串:

    举例

    错误写法:

    vue.js

    //使用 props 传输资料予子组件

    //props , data 重复名称会出现错误

    Vue.config.debug = true;

    Vue.component('child', {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: '{{ msg }}{{nihao}}{{nisha}}',

    data: function() {

    return {

    mssage: 'boy'

    }

    }

    });

    var vm = new Vue({

    el: '#app1'

    })

    正确写法:

    vue.js

    //使用 props 传输资料予子组件

    //props , data 重复名称会出现错误

    Vue.config.debug = true;

    Vue.component('child', {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: '{{ msg }}{{nihao}}{{nisha}}'

    });

    var vm = new Vue({

    el: '#app1'

    })

    props 传入多个数据(顺序问题)

    第一种:

    HTML

    JS

    Vue.config.debug = true;

    Vue.component('child', {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: '{{ msg }}{{nihao}}{{nisha}}',

    /*data: function() {

    return {

    msg: 'boy'

    }

    }*/

    });

    var vm = new Vue({

    el: '#app1'

    })

    结果:hello! hello1! hello2!

    第二种:

    HTML

    JS

    Vue.config.debug = true;

    Vue.component('child', {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: '123{{ msg }}{{nihao}}{{nisha}}',

    /*data: function() {

    return {

    msg: 'boy'

    }

    }*/

    });

    var vm = new Vue({

    el: '#app1'

    })

    结果:123hello! 123hello1! 123hello2!

    第三种:

    HTML

    JS

    Vue.config.debug = true;

    Vue.component('child', {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: '{{ msg }}{{nihao}}{{nisha}}123',

    /*data: function() {

    return {

    msg: 'boy'

    }

    }*/

    });

    var vm = new Vue({

    el: '#app1'

    })

    结果:hello! 123 hello1! 123 hello2!123

    第四种:

    HTML

    JS

    Vue.config.debug = true;

    Vue.component('child', {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: '{{ msg }}123{{nihao}}{{nisha}}123',

    /*data: function() {

    return {

    msg: 'boy'

    }

    }*/

    });

    var vm = new Vue({

    el: '#app1'

    })

    结果:hello! 123 123hello1! 123hello2!

    结论:

    在props 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有:

    1-在最前面加入—每个子组件渲染出来都会在其前面加上

    2-在最后面加入—每个子组件渲染出来都会在其后面加上

    3-在中间加入—他前面子组件后面加上,后面的子组件后面加上

    本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

    关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用Props传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。...

    本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下

    使用 Props 传递数据

    组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

    “prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项 声明 props:

    Vue.component(‘child’, {

    // 声明 props

    props: ['msg'],

    // prop 可以用在模板内

    // 可以用 `this.msg` 设置

    template: ’{{ msg }}

    })

    然后向它传入一个普通字符串:

    <

    ild>

    举例

    错误写法:

    html>

    vue.js

    //使用 props 传输资料予子组件

    //props , data 重复名称会出现错误

    <

    ild>

    Vue.config.debug = true;

    Vue.component(‘child’, {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: ’{{ msg }}{{nihao}}{{nisha}}’,

    data: function() {

    return {

    mssage: ’boy’

    }

    }

    });

    var vm = new Vue({

    el: ’#app1′

    })

    <

    ml>

    正确写法:

    html>

    vue.js

    //使用 props 传输资料予子组件

    //props , data 重复名称会出现错误

    <

    ild>

    Vue.config.debug = true;

    Vue.component(‘child’, {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: ’{{ msg }}{{nihao}}{{nisha}}

    });

    var vm = new Vue({

    el: ’#app1′

    })

    <

    ml>

    props 传入多个数据(顺序问题)

    第一种:

    HTML

    <

    ild>

    <

    ild>

    <

    ild>

    JS

    Vue.config.debug = true;

    Vue.component(‘child’, {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: ’{{ msg }}{{nihao}}{{nisha}}’,

    /*data: function() {

    return {

    msg: ’boy’

    }

    }*/

    });

    var vm = new Vue({

    el: ’#app1′

    })

    结果:hello! hello1! hello2!

    第二种:

    HTML

    <

    ild>

    <

    ild>

    <

    ild>

    JS

    Vue.config.debug = true;

    Vue.component(‘child’, {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: ’123{{ msg }}{{nihao}}{{nisha}}’,

    /*data: function() {

    return {

    msg: ’boy’

    }

    }*/

    });

    var vm = new Vue({

    el: ’#app1′

    })

    结果:123hello! 123hello1! 123hello2!

    第三种:

    HTML

    <

    ild>

    <

    ild>

    <

    ild>

    JS

    Vue.config.debug = true;

    Vue.component(‘child’, {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: ’{{ msg }}{{nihao}}{{nisha}}123’,

    /*data: function() {

    return {

    msg: ’boy’

    }

    }*/

    });

    var vm = new Vue({

    el: ’#app1′

    })

    结果:hello! 123 hello1! 123 hello2!123

    第四种:

    HTML

    <

    ild>

    <

    ild>

    <

    ild>

    JS

    Vue.config.debug = true;

    Vue.component(‘child’, {

    // declare the props

    props: ['msg','nihao','nisha'],

    // the prop can be used inside templates, and will also

    // be set as `this.msg`

    template: ’{{ msg }}123{{nihao}}{{nisha}}123’,

    /*data: function() {

    return {

    msg: ’boy’

    }

    }*/

    });

    var vm = new Vue({

    el: ’#app1′

    })

    结果:hello! 123 123hello1! 123hello2!

    结论:

    在props 中传入多个数据是,如果在父组件的模板类添加其他元素或者字符会有:

    1-在最前面加入—每个子组件渲染出来都会在其前面加上

    2-在最后面加入—每个子组件渲染出来都会在其后面加上

    3-在中间加入—他前面子组件后面加上,后面的子组件后面加上

    展开全文
  • 关于Vue中props的详解

    万次阅读 多人点赞 2018-07-23 00:11:08
    父组件的数据需要通过 prop 才能下发到子组件。 也就是props是子组件访问父组件数据的唯一接口。 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号)。 子组件不能直接在模板里面...

    看一下官方文档:

    组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

    也就是props是子组件访问父组件数据的唯一接口。

    详细一点解释就是:

    一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

    子组件不能直接在模板里面渲染父元素的数据。

    如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。
     

    1. 基本用法

    图1-props

        <div id="app1">
            <!-- hello引用父元素的hello,它也可以引用message,greet,world等 -->
            <child :hello='hello'></child>
        </div>
        <script>
            var com1 = Vue.component('child',{
                // 声明在prop中的变量可以引用父元素的数据
                props:['hello'],
               // 这里渲染props中声明的那个hello
                template:'<div><p>{{ hello }}</p></div>',
            })
    
            var app1 = new Vue ({
                el: '#app1',
                data: {
                    greet: {
                        hello:'hello,',
                        world: 'world',
                    },
                    message: 'message1',
                }
            })
        </script>
    

     

    2. camelCase vs. kebab-case:js中用驼峰式命名,在html中替换成短横线分隔式命名

    <!-- 在 HTML 中使用 kebab-case -->
    <child my-message="hello!"></child>
    
    <script>
        Vue.component('child', {
            // 在 JavaScript 中使用 camelCase
            props: ['myMessage'],
            template: '<span>{{ myMessage }}</span>'
        })
    </script>
    

     

    3.单向数据流: props是单向绑定的

    当父组件的属性变化时,将传导给子组件,但是反过来不会。

    每次父组件更新时,子组件的所有 prop 都会更新为最新值。

    不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

    在两种情况下,我们很容易忍不住想去修改 prop 中数据:

    1. Prop 作为初始值传入后,子组件想把它当作局部数据来用;
    2. Prop 作为原始数据传入,由子组件处理成其它数据输出。

    对这两种情况,正确的应对方式是:
    定义一个局部变量,并用 prop 的值初始化它:

        props: ['initialCounter'],
        data: function () {
          return { counter: this.initialCounter }
        }
        
    

    定义一个计算属性,处理 prop 的值并返回:

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

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

    举个例子:

        <div id="app3">
            <my-component :object='object'></my-component>
        </div>
        <script src="http://vuejs.org/js/vue.min.js"></script>
        <script>
            //
            var mycom = Vue.component('my-component', {
                //添加一个input改变子组件的childOject,那么父元素的object也会被改变,但是Vue没有报错!
                template: '<p>{{ object.name }} is {{ object.age }} years old.<br><input v-model="childObject.name" type="text"></p>',
                props: ['object','school'],
                data: function () {
                    // 子组件的childObject 和 父组件的object 指向同一个对象
                    return {
                        childObject: this.object
                    }
                }
            });
            var app3 = new Vue({
                el: '#app3',
                data: {
                    object:{
                        name: 'Xueying',
                        age: '21',
                    },
                    school:'SCUT',
                },
            })
        </script>
    

    图2-改变childObject.name,object.name也改变

     

    图3-控制台输出app3.object.name

     

     

    4. props验证

    可以为prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告。

    具体验证规则见官方文档:Prop验证规则
     

    5. $parent

    $parent 也可以用来访问父组件的数据。

    而且子组件可以通过$parent 来直接修改父组件的数据,不会报错!

    可以使用props的时候,尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

    另外在一方面,直接在子组件中修改父组件的数据是很糟糕的做法,props单向数据流就没有这种顾虑了。

    展开全文
  • 父组件的数据需要通过 prop 才能下发到子组件.也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是:一个组件可以直接在模板里面渲染data里面的数据(双大括号)。子组件不能直接在模板里面渲染父元素的...
  • 简单理解vue中Props属性_javascript技巧

    千次阅读 2017-08-22 01:16:59
    简单理解vue中Props属性_javascript技巧 摘要: 本文讲的是简单理解vue中Props属性_javascript技巧, 本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下 使用 Props 传递数据 组件实例的作用...
  • vue中props传值给data时-props有值,watch有值,但在v-for中无法渲染 有哪位大佬知道怎么回事吗?
  • 1.默认写法props: {rowClick: {type: Function,default: function() {}},title: {type: String,default: "标题"},display: {type: String,default: "table"},columnCount: {type: Number,default: 4},columns: {type...
  • vue中props传值

    千次阅读 2017-10-25 09:57:12
    props是实现父组件传递消息给子组件的,子组件不能通过这个传值给父组件 用法如下: parent.vue(这是父组件d) export default { name: 'app', data () { return { msg: '书屋', search:false, ...
  • VUE props 得默认值用法

    万次阅读 2019-07-25 10:17:44
    propsVUE中子组件能获得父组件值得唯一通道 通常得用法: 父组件: <s-button :h="list"></s-buttong> 子组件: props:["h"]============================console.log(this.h) 今天在封装...
  • vue中props的默认写法

    万次阅读 2019-05-06 09:41:34
    默认写法 props: { rowClick: { type: Function, default: function() {} }, title: { type: String, default: "标题" }, display: { type: String, default: ...
  • vue中 props的基本介绍

    2020-11-28 10:27:05
    一、Prop 的大小写 (camelCase vs kebab-case) HTML 的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 的模板时,camelCase (驼峰命名法) 的 ... props:["hellow
  • Vue中的attrs和attrs和attrs和listener Vue-- attrs与attrs与attrs与listeners的详解 在 vue 中,对于在父组件中传递的属性, 若在子组件中使用@Prop声明了属性如@Prop name,则 name 属性只会在 this.props中出现,...
  • vue中props组件传值

    2017-07-19 16:52:00
    props用来改变子组件属性,并且子组件的驼峰式在使用时标签要改成横线式,比如mesAlet==》mes-alet 父组件: <child message="hello!"></child> 子组件: Vue.component('child', { // 声明...
  • 使用 Props 传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要...
  • Vue中props类型及默认值

    千次阅读 2020-04-03 11:34:28
    props: { demoString: { type: String, default: '' }, demoNumber: { type: Number, default: 0 }, demoBoolean: { type: Boolean, default: true ...
  • Vue中props的使用

    千次阅读 2018-06-14 16:54:40
    props属性是父子组件之间的通信桥梁。何为父子组件?从子组件的观点来看,他的上一级实例或组件即为他的父组件。我们知道,处于安全考虑,组件模板里我们无法直接使用父组件的data数据,使用props这个属性可以将父...
  • vue props 组件传参

    2018-11-23 14:42:39
    使用:在你使用模板的时候,如果模板的prop是以驼峰形式命名的,那么在传参的时候要以短线分隔,eg: Vue.componet('myInpt',{ porps:['errMess'], template:`&lt;div&gt;{{errMess}}&lt;/div&...
  • vue中props的双向绑定

    2018-12-17 19:39:49
    vue的学习,一开始我是自己写组件练手的,在这个过程我遇到一个问题:props:父组件传递给子组件参数(1)props直接在子组件里直接使用是可以实时更新的(2)props如果在created,mounted等声明或者直接赋值给...
  • 使用 Props 传递数据 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 “prop” 是组件数据的一个字段,期望从父组件传下来。...Vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,933
精华内容 1,973
关键字:

vue中props

vue 订阅