vue中父傳子(props)的用法

阿新 • • 發佈：2018-12-29

方式一：靜態

<!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="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
  <div id="app">
    <parsent></parsent>
  </div>
  <script>
    var childNode = {
      template:`
        <div>{{forChildMsg}}</div>
      `,
      props: ['for-child-msg']
    };
    var parsentNode = {
      template: `
        <div>
          <child for-child-msg="aaa"></child>
          <child for-child-msg="bbb"></child>
        </div>
      `,
      components: {
        child: childNode
      }
    };
    new Vue({
      el: '#app',
      components: {
        parsent: parsentNode
      }
    })
  </script>
</body>
</html>

方式二：動態

<!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="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
  <div id="app">
    <parsent></parsent>
  </div>
  <script>
    var childNode = {
      template:`
        <div>{{forChildMsg}}</div>
      `,
      props: ['for-child-msg']
    };
    var parsentNode = {
      template: `
        <div>
          <child :for-child-msg="msg1"></child>
          <child :for-child-msg="msg2"></child>
        </div>
      `,
      components: {
        child: childNode
      },
      data(){
        return {
          msg1: '這是msg1',
          msg2: '這是msg2'
        }
      }
    };
    new Vue({
      el: '#app',
      components: {
        parsent: parsentNode
      }
    })
  </script>
</body>
</html>

驗證：

<!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="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
  <div id="app">
    <parsent></parsent>
  </div>
  <script>
    var childNode = {
      template:`
        <div>{{forChildMsg}}</div>
      `,
      props: {
        forChildMsg: {
          type: String,
          default:'12'
        }
      }
    };
    var parsentNode = {
      template: `
        <div>
          <child :for-child-msg="msg1"></child>
          <child :for-child-msg="msg2"></child>
        </div>
      `,
      components: {
        child: childNode
      },
      data(){
        return {
          msg1: '這是msg1'
        }
      }
    };
    new Vue({
      el: '#app',
      components: {
        parsent: parsentNode
      }
    })
  </script>
</body>
</html>

vue中父傳子(props)的用法

方式一：靜態 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Vue中父傳子、子傳父元件之間傳值

在Vue的框架開發的專案過程中，經常會用到元件來管理不同的功能，有一些公共的元件會被提取出來。這時必然會產生一些疑問和需求？比如一個元件呼叫另一個元件作為自己的子元件，那麼我們如何進行給子元件進行傳值呢。常見的就是父子元件，子父元件之間的傳值。父子元件的關係可以總結為 pro

vue中父元件通過props向子元件傳非同步值為空的解決方案

一、問題描述封裝了一個highchart元件，想要複用，結果props傳值一直失敗，圖自然畫不出來，watch,mounted等鉤子函式都試過依然不行。二、解決方案因為父元件的值是通過axios請求獲得，當父元件拿到處理後的值時，子元件鉤子函式生命週期已經走完，即

父傳子props

父 <update :show="obj"/> //一、用show繫結obj物件,用來傳給子 export default{ data(){ return{ //二、定義obj物件

Vue中父元件向子元件傳值

Vue中父元件向子元件傳值相關Html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

React中---"props" 及父元件如何向子元件傳值(元件通訊-父傳子)

以下關於React的props屬性的內容介紹都是我個人理解：在react當中，我們常說的單向資料流值的說法，其實說的就是props屬性，最常見的props用法就是元件之間的通訊---父元件向子元件傳值。並且，props本身是不可逆的，具有隻讀性，也就是說它不能修改自己本身，傳

Vue元件通訊（props）父傳子

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="vi

vue中父元件傳值給子元件，父元件值改變，子元件不能重新渲染

1在子元件中用watch()監聽值的改變，不同的型別的要用不同的監聽方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: {

Vue組件間的通信--父傳子

vue 組件通信屬性傳值，子組件props 接收<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head>

vue父傳子，子傳父的描述

父傳子：在父元件用v-bind繫結一個值，在子元件中用props接受父元件繫結的值子傳父：先在子元件中定義一個方法，然後在子元件方法中使用this.$emit，this.$emit有兩個引數，第一個是"自定義函式",第二個就是傳遞的引數值；然後在父元件中使用v-on來監聽子元件方法中使用的th

Vue中父元件更改子元件的class

在實踐餓了嗎的事例中有時需要在元件中更改一些子元件的樣式。自己感覺使用 >>>比較好用點 .star >>> .star-item { margin-right: 5px; } 改之後的效果：有些像 SASS 之類的前處理器無法正確解析

react入門筆記五 (元件傳值----------父傳子->props)

經過上面的學習,我們已經會了元件化的開發; 但是第四篇的專案有個致命的缺陷; 就是它的網站名,與a標籤的連結地址是靜態資料,是定死的,這也就是我們說的硬程式碼; 這樣的話,那我們在呼叫這個自定義元件的時候,所有的元件都是一樣的,這樣就沒有任何意義了; 所以現在讓我們開始讓元件內的資料

vue中父元件獲取子元件的方法

關鍵詞：ref 在子元件child.vue中，有兩個資料： data() { return { a:1, b:2, } } 在父元件father.vue中，使用子元件： <child ref="child" .../> &

vue元件之間通訊：父傳子

如果熟悉React你就會發現，vue與React的元件通訊是一樣的：父傳子、子傳父、非父子其原理是一樣的。今天只講vue的父傳子：子元件： <template> <div> &nbs

Vue的三種常用傳值方式、父傳子、子傳父、非父子元件傳值

Vue常用的三種傳值方式有：1.父傳子 2.子傳父 3.非父子傳值父子元件的關係可以總結為 prop 向下傳遞，事件向上傳遞。父元件通過 prop 給子元件下發資料，子元件通過事件給父元件傳送訊息。 1. 父元件向子元件進行傳值父元件: <temp

Vue 中父元件和子元件之間獲取對方資料和方法

父元件獲取子元件的資料和方法 one 在父元件中呼叫子元件時，定義一個ref（其實和選擇器類似）： <Common ref="commonChild" :pathologyId="form.pathologyId" /> 在父元件中獲取子元件屬性和方

vue元件通訊，點選傳值，動態傳值（父傳子，子傳父）

vue說到元件通訊，無非是父元件傳子元件，子元件傳父元件，跨級元件傳值，同級元件傳值，個人覺得，除了父子元件的傳值，其餘情況就可以用vuex來解決了，這篇先不說vuex，這裡介紹父子元件傳值。不會你打我！一、父元件傳子元件，核心--props 下面是場景，點選傳值給子元

Vue.js的元件（二）父元件與子元件的資料聯絡之父傳子

假設有如下元件： /*js*/ Vue.component('my-button',{ tempalte:'<button>一個按鈕</button>' }) var app3 = new Vue({ el:'#ap

Vue父子傳值(父傳子)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script s

vue元件之間互相傳值：父傳子，子傳父

父向子元件傳參　　例子：App.vue為父，引入componetA元件之後，則可以在template中使用標籤（注意駝峰寫法要改成componet-a寫法，因為html對大小寫不敏感，componenta與componentA對於它來說是一樣的，不好區分，所以使用小寫-小寫這種寫法）。而子元件componet

vue中父傳子(props)的用法

相關推薦