props接收父组件传属性的冒号“:”引发的系列思考
开门见山的结论
因为只要你在父组件绑定（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