父組件向子組件傳值

成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設(shè)|成都網(wǎng)站改版|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋玻璃隔斷等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身制作品質(zhì)網(wǎng)站。

<div id="app">
  <!-- 父組件，可以在引用子組件的時(shí)候， 通過 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用 -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123 啊-父組件中的數(shù)據(jù)'
   },
   methods: {},
   components: {
    // 結(jié)論：經(jīng)過演示，發(fā)現(xiàn)，子組件中，默認(rèn)無(wú)法訪問到 父組件中的 data 上的數(shù)據(jù) 和 methods 中的方法
    com1: {
     data() { // 注意： 子組件中的 data 數(shù)據(jù)，并不是通過 父組件傳遞過來(lái)的，而是子組件自身私有的，比如： 子組件通過 Ajax ，請(qǐng)求回來(lái)的數(shù)據(jù)，都可以放到 data 身上；
      // data 上的數(shù)據(jù)，都是可讀可寫的；
      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '<h2 @click="change">這是子組件 --- {{ parentmsg }}</h2>',
     // 注意： 組件中的 所有 props 中的數(shù)據(jù)，都是通過 父組件傳遞給子組件的
     // props 中的數(shù)據(jù)，都是只讀的，無(wú)法重新賦值
     props: ['parentmsg'], // 把父組件傳遞過來(lái)的 parentmsg 屬性，先在 props 數(shù)組中，定義一下，這樣，才能使用這個(gè)數(shù)據(jù)，只讀，寫的話會(huì)報(bào)警告
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '被修改了'
      }
     }
    }
   }
  });

新聞名稱：vue-父子組件和ref實(shí)例詳解-創(chuàng)新互聯(lián)
分享鏈接：http://chinadenli.net/article26/dgghjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、建站公司、虛擬主機(jī)、網(wǎng)站營(yíng)銷、網(wǎng)站導(dǎo)航、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)