props接收父组件传属性的冒号“:”引发的系列思考

最新推荐文章于 2023-01-10 11:04:08 发布

砖业洋__

最新推荐文章于 2023-01-10 11:04:08 发布

阅读量1.2k

点赞数 23

分类专栏： vue 文章标签： vue vue props ：

本文链接：https://blog.csdn.net/qq_34115899/article/details/104310671

版权

vue 专栏收录该内容

14 篇文章 16 订阅

订阅专栏

开门见山的结论

因为只要你在父组件绑定（v-bind:简写为冒号:），那么就认为是变量的引用或者数字，如果不写冒号，就认为是字符串

这一句话就解释了所有问题，记住它，你基本能解决掉所有问题。

有冒号无变量的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <script type="text/javascript" src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <!--组件参数校验就是子组件对来自父组件的值进行处理-->
        <div id="app">
            <child :content="hello"></child><!--父组件向子组件传递-->
        </div>
        <script>
            Vue.component('child',{
                props:['content'],
                template:'<div>{{content}}</div>'
            })
            var vm = new Vue({
                el:"#app",
                data:{
                }
            })
        </script>
    </body>
</html>

运行结果

居然报错了，Vue警告render函数正在尝试访问不存在的属性。

从父组件往子组件传东西到时候要在子组件props声明，为什么会错？

这里的hello可不是字符串，这个是变量的引用，在data中我们根本没定义hello变量呢！

就是上面的例子，没有hello变量，那么我们在data里面加上hello试试

data:{
    hello: "hhhh"
}

运行结果

或者不加data中的hello变量，去掉:content前面的冒号，这样就认为是字符串，就打印"hello"，结果如下

有冒号传数字的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <script type="text/javascript" src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <!--组件参数校验就是子组件对来自父组件的值进行处理-->
        <div id="app">
            <child :content="123"></child><!--父组件向子组件传递-->
        </div>
        <script>
            Vue.component('child', {
                props: {
                    content: {
                        type: Number // 接收父组件我希望是个Number类型
                    }
                },
                template:'<div>{{content}}</div>'
            })
            var vm = new Vue({
                el:"#app",
                data:{
                }
            })
        </script>
    </body>
</html>

运行结果没问题

没冒号传数字的例子

上面一个例子只用改动一点点

改为没有冒号

结果如下

我们上面说了，只要没有冒号，就认为content是字符串，而我们上面参数校验的时候content的type是Number，这里也就报错了，说期待Number 123，但是却获得String "123"

那么我们把子组件的props的参数校验改为String

props: {
    content: {
        type: String // 接收父组件我希望是个String类型
    }
}

运行就成功了

更多例子可以见文档 Prop

Prop命名大小写规范

在声明 prop 的时候，其命名应该始终使用驼峰式命名为（camelCase），而在模板和JSX中应该始终使用单词连接串的命名(kebab-case)

我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

例子如下：

props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

router-link的to前面的冒号:

相类似的，用这个说法也能解释的通<router-link>的to

到底是用<router-link to="xxx">还是<router-link :to="xxx">呢？后者的:to是有冒号的

to后面当成字符串，适合直接跟路径<router-link to="/">，比如返回根路径的路由对应的组件

:to后面当成引用，后面跟对象<router-link :to="{name:'content', params:{id:v.id}}">之类的

如果to后面跟对象，你就会看到url路径是你这里写的对象，没有被正确解析为路径

比如应该解析为xxx/test.html#/content/1，却解析为xxx/test.html#/{name:'content', params:{id:v.id}}

如果:to后面跟字符串'/'，会发现无法解析Errer compiling template

关注、留言，我们一起学习。

===============Talk is cheap, show me the code================

砖业洋__

关注

23
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
props接收父组件传属性的冒号“:”引发的系列思考

目录开门见山的结论有冒号无变量的例子有冒号传数字的例子没冒号传数字的例子开门见山的结论因为只要你在父组件绑定（v-bind:简写为冒号:），那么就认为是变量的引用或者数字，如果不写冒号，就认为是字符串这一句话就解释了所有问题，记住它，你基本能解决掉所有问题。有冒号无变量的例子<!DOCTYPE html><html> ...
复制链接

扫一扫