这里有个注意的地方，Vue实例控制app DIV 大组件，我们在div中天加小组件的时候，传值需要创建自定义的属性
之后在通过props:[‘属性名’] 来把父元素data中的数据传递给子组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <!-- 首先我们的Vue实例 控制着app 大DIV 组件，我们通过组件log 有添加了子组件 --> <!-- 父组件可以在引用 子组件的时候，通过属性绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部 供子组件使用--> <div class="app"> <log v-bind:parentmsg="msg"></log> </div> <script> // 其中Vue 也可以看作一个大组件，他里面包含了log 子组件 var vm=new Vue({ el:'.app', data:{ msg:'访问我，你可以吗？' }, methods: { }, components:{ log:{ // 经过演示，发现 子组件中，默认是无法访问到父组件中data上的数据和methods方法的 template:'<h1>我像访问父组件中的msg属性--------{{parentmsg}}</h1>', // 只有props 是数组 其他的都是对象 // filters:{},components:{}diewctives:{}....... // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上； // data 上的数据，都是可读可写的； data(){ return {title:123,content:'qqqq'} }, // 把父组件传递过来的parentmsg属性，现在props数组中，定义下，这样，才能使用这个数据 props:['parentmsg'], // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 // props 中的数据，都是只读的，无法重新赋值 } } }) </script> </body> </html>