<!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> <div id="app"> <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --> <mycom1></mycom1> <com2 v-bind:data1='msg'></com2> </div> <template id="app1"> <div> <h1>{{ msg1 }}</h1> </div> </template> <script> // 创建 Vue 实例，得到 ViewModel // 创建的第一种方式 使用 Vue.extend 来创建全局的Vue组件 var com1 = Vue.extend({ template: '#app1', // 通过 template 属性，指定了组件要展示的HTML结构 data() { return { msg1: '这个是父组件的数据' } } }) Vue.component('mycom1', com1) var vm = new Vue({ el: '#app', data: { msg:'这个是实例data里面的数据' }, methods: {}, components: { // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法 com2: { data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的， // 比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上； // data 上的数据，都是可读可写的； return { title: '这个是子组件的数据' } }, template: '<h1 @click="change">这是子组件 --- {{ data1 }}<br>{{ title }}</h1>', // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的 // props 中的数据，都是只读的，无法重新赋值 // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据 props: ['data1'], directives: {}, filters: {}, components: {}, methods: { change() { //点击把子组件的数据改为父组件的数据 this.title = this.data1 } } } } }); </script> </body> </html>