vue-父子组件和ref实例详解-创新互联

父组件向子组件传值

  
  
 
// 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123 啊-父组件中的数据'
   },
   methods: {},
   components: {
    // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
    com1: {
     data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
      // data 上的数据，都是可读可写的；
      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '
这是子组件 --- {{ parentmsg }}
',
     // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
     // props 中的数据，都是只读的，无法重新赋值
     props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据，只读，写的话会报警告
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '被修改了'
      }
     }
    }
   }
  });