props传值来源于子组件无法访问父组件的数据和方法，所以考虑props 传值
props使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 第一步、父组件可以在引用子组件的时候通过属性绑定的形式（v-bind：自定义属性）
把需要传递给子组件的数据传过去 -->
<!-- 注：在HTML 中，需要将组件的属性 postTitle 改成 post-title。 -->
<con1 v-bind:postTitle="msg"></con1>
</div>
<script>
const obj = {
el: '#app',
data: function () {
return {
msg: 'taowuhua'
}
},
components: {
con1: {
// 第二步、 把父组件传递的自定义属性定义下，然后子组件就可以用了
props: ['posttitle'],
// 第三步、 子组件无法访问父组件间的数据和methods中的方法
// 组件挂载在vm上,和子组件相关
template: '<p> {{posttitle}}正在前端小课学习vue </p>'
}
}
}
// 创建vue实例
const vm = new Vue(obj)
</script>
</body>
</html>
这里有坑位：就是属性传值的自定义属性尽量不要使用驼峰式，使用分隔符或者全部小写字母都行，详情参考vue官网https://cn.vuejs.org/v2/guide/components-props.html
注：props 数据只读不能写面试常问
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
