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

目录

开门见山的结论

有冒号无变量的例子

有冒号传数字的例子

没冒号传数字的例子

Prop命名大小写规范

router-link的to前面的冒号:


 

开门见山的结论

因为只要你在父组件绑定(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>

运行结果没问题

 

 

没冒号传数字的例子

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

<child :content="123"></child><!--父组件向子组件传递-->

改为没有冒号

<child content="123"></child><!--父组件向子组件传递-->

结果如下

我们上面说了,只要没有冒号,就认为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================

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页