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

父组件向子组件传值

成都创新互联公司专注于网站建设|成都网站改版|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖玻璃隔断等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身制作品质网站。

<div id="app">
  <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
// 创建 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: '<h2 @click="change">这是子组件 --- {{ parentmsg }}</h2>',
     // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
     // props 中的数据，都是只读的，无法重新赋值
     props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据，只读，写的话会报警告
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '被修改了'
      }
     }
    }
   }
  });

新闻名称：vue-父子组件和ref实例详解-创新互联
分享链接：https://www.cdcxhl.com/article26/dgghjg.html

成都网站建设公司_创新互联，为您提供动态网站、建站公司、虚拟主机、网站营销、网站导航、网站维护

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联