99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

var childNode = {
 template: `
  
childNode
  `
};
var parentNode = {
 template: `
  

   
   
  
  `,
 components: {
 child: childNode
 }
};
new Vue({
 el: "#example",
 components: {
 parent: parentNode
 }
});

這里的 childNode 定義的 template 是一個 div，并且內容是"childNode"字符串。

而在 parentNode 的 template 中定義了 div 的 class 名叫 parent 并且包含了兩個 child 組件。

如果大家想對VUE.JS有更加深入系統的學習，可以參閱 Vue.js實戰(zhàn) PDF高質量掃描版 這本經典讀物

靜態(tài) props

組件實例的作用域是孤立的。這意味著不能（也不應該）在子組件的模板中直接飲用父組件的數據。要讓子組件使用父組件的數據，需要通過子組件的 props 選項。

父組件向子組件傳遞數據分為兩種方式：動態(tài)和靜態(tài)，這里先介紹靜態(tài)方式。

子組件要顯示的用 props 聲明它期望獲得的數據

修改上例中的代碼，給 childNode 添加一個 props 選項和需要的forChildMsg數據;

然后在父組件中的占位符添加特性的方式來傳遞數據。

var childNode = {
 template: `
  

   {{forChildMsg}}
  
  `,
 props: ["for-child-msg"]
};
var parentNode = {
 template: `
  

   
parentNode
   
   
  
  `,
 components: {
 child: childNode
 }
};

命名規(guī)范

對于 props 聲明的屬性，在父組件的 template 模板中，屬性名需要使用中劃線寫法；

子組件 props 屬性聲明時，使用小駝峰或者中劃線寫法都可以；而子組件的模板使用從父組件傳來的變量時，需要使用對應的小駝峰寫法。別擔心，Vue 能夠正確識別出小駝峰和下劃線命名法混用的變量，如這里的forChildMsg和for-child-msg是同一值。

動態(tài) props

在模板中，要動態(tài)地綁定父組件的數據到子組件模板的 props，和綁定 Html 標簽特性一樣，使用v-bind綁定；

基于上述靜態(tài) props 的代碼，這次只需要改動父組件：

var parentNode = {
 template: `
  

   
parentNode
   
   
  
  `,
 components: {
 child: childNode
 },
 data: function() {
 return {
  childMsg1: "Dynamic props msg for child-1",
  childMsg2: "Dynamic props msg for child-2"
 };
 }
};

在父組件的 data 的 return 數據中的 childMsg1 和 childMsg2 會被傳入子組件中，

props 驗證

驗證傳入的 props 參數的數據規(guī)格，如果不符合數據規(guī)格，Vue 會發(fā)出警告。

能判斷的所有種類（也就是 type 值）有：String, Number, Boolean, Function, Object, Array, Symbol

Vue.component("example", {
 props: {
 // 基礎類型檢測, null意味著任何類型都行
 propA: Number,
 // 多種類型
 propB: [String, Number],
 // 必傳且是String
 propC: {
  type: String,
  required: true
 },
 // 數字有默認值
 propD: {
  type: Number,
  default: 101
 },
 // 數組、默認值是一個工廠函數返回對象
 propE: {
  type: Object,
  default: function() {
  console.log("propE default invoked.");
  return { message: "I am from propE." };
  }
 },
 // 自定義驗證函數
 propF: {
  isValid: function(value) {
  return value > 100;
  }
 }
 }
});
let childNode = {
 template: "
{{forChildMsg}}
",
 props: {
 "for-child-msg": Number
 }
};
let parentNode = {
 template: `