Vue的Props属性概述

最新推荐文章于 2024-03-08 16:46:36 发布

马优晨

最新推荐文章于 2024-03-08 16:46:36 发布

阅读量4.5k

点赞数 1

分类专栏：前端开发文章标签： props VUE的props props父子组件通

本文链接：https://blog.csdn.net/qq_24147051/article/details/52413102

版权

前端开发专栏收录该内容

229 篇文章 26 订阅

订阅专栏

使用 Props 传递数据

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

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

    Vue.component('child', {
      // 声明 props
      props: ['msg'],
      // prop 可以用在模板内
      // 可以用 `this.msg` 设置
      template: '<span>{{ msg }}</span>'
    })

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

    <child msg="hello!"></child>

举例

错误写法：

<!DOCTYPE html>
    <html lang="en">

    <head>
        <script type="text/javascript" src="./vue.js"></script>
        <meta charset="UTF-8">
        <title>vue.js</title>
    </head>

    <body>
    <pre>
           使用 props 传输资料予子组件
           props , data 重复名称会出现错误


    </pre>
    <div id="app1">
        <child mssage="hello!"></child>
    </div>
    <script>
        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: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
            data: function() {
                return {
                     mssage: 'boy'
                }
            }
        });
        var vm = new Vue({
            el: '#app1'
        })
    </script>
    </body>

    </html>

正确写法：

<!DOCTYPE html>
    <html lang="en">

    <head>
        <script type="text/javascript" src="./vue.js"></script>
        <meta charset="UTF-8">
        <title>vue.js</title>
    </head>

    <body>
    <pre>
           使用 props 传输资料予子组件
           props , data 重复名称会出现错误


    </pre>
    <div id="app1">
        <child mssage="hello!"></child>
    </div>
    <script>
        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: '<span>{{ msg }}{{nihao}}{{nisha}}</span>'
        });
        var vm = new Vue({
            el: '#app1'
        })
    </script>
    </body>

这里写代码片

    </html>

props 传入多个数据（顺序问题）

第一种

HTML

        <div id="app1">
                <child msg="hello!"></child>
                <child nihao="hello1!"></child>
                <child nisha="hello2!"></child>
        </div>

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: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
            /*data: function() {
                return {
                    msg: 'boy'
                }
            }*/
        });
        var vm = new Vue({
            el: '#app1'
        })

结果：hello! hello1! hello2!

第二种

HTML

    <div id="app1">
        <child msg="hello!"></child>
        <child nihao="hello1!"></child>
        <child nisha="hello2!"></child>
    </div>

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: '<span>123{{ msg }}{{nihao}}{{nisha}}</span>',
        /*data: function() {
            return {
                msg: 'boy'
            }
        }*/
    });
    var vm = new Vue({
        el: '#app1'
    })

结果：123hello! 123hello1! 123hello2!

第三种

HTML

        <div id="app1">
            <child msg="hello!"></child>
            <child nihao="hello1!"></child>
            <child nisha="hello2!"></child>
        </div>

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: '<span>{{ msg }}{{nihao}}{{nisha}}123</span>',
            /*data: function() {
                return {
                    msg: 'boy'
                }
            }*/
        });
        var vm = new Vue({
            el: '#app1'
        })

结果：hello! 123 hello1! 123 hello2!123

第四种

HTML

        <div id="app1">
            <child msg="hello!"></child>
            <child nihao="hello1!"></child>
            <child nisha="hello2!"></child>
        </div>

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: '<span>{{ msg }}123{{nihao}}{{nisha}}123</span>',
            /*data: function() {
                return {
                    msg: 'boy'
                }
            }*/
        });
        var vm = new Vue({
            el: '#app1'
        })

结果：hello! 123 123hello1! 123hello2!

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

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

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

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

参考： http://cn.vuejs.org/guide/components.html#Props

马优晨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的Props属性概述

使用 Props 传递数据组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项声明 props：Vue.component('child', { // 声明 props props: ['msg'], // prop 可以
复制链接

扫一扫