父元件 使用 v-model
子元件 預設 需要props->value的屬性, 需要乙個方法 進行如下操作, input是
this.$emit('input', input.value);
就是 介面觸發子元件某個事件->提交引數到父元件 input事件->父元件v-model->子元件value屬性 有這麼乙個流程
littletank
v-model
是 vue2 中唯一支援雙向繫結的指令,用於表單控制項繫結,但不代表它只能用在表單控制項之上。在文件 使用自定義事件的表單輸入元件 一節中提到了,v-model
其實是個語法糖。
這不過是以下示例的語法糖:
//簡寫:
也就是說,你只需要在元件中宣告乙個name為value的props,並且通過觸發input事件傳入乙個值,就能修改這個value。
我們來做乙個元件內部控制關閉的彈窗//父元件中引用
}用來測試這裡顯示'111111',(測試1)
這裡title是動態值,在data裡可以自己設定預設值,假如這裡我們設定為「111111」
//子元件
vue.component('my-component', }//用來測試,這裡顯示'111111',(測試2)
按鈕`, props: ['value'], //接收乙個 value prop
methods:
}});
demo裡我保留了一些測試的東西,希望你能看的明白
想一想,如果我們要繫結多個值的情況
如果繫結多個值的話,建議我們用object物件型別,array陣列型別,也就是說我們接收的value型別需要改變下。
props的驗證型別建議也看看:props的驗證型別//子元件
vue.component('my-component', }
按鈕`, props:
},methods:
}});
vue 使用自定義元件
新建專案,ctrl r進入cmd,切換至工作目錄 c users asus f f cd study f study cd vue f study vue cd demo 安裝 vue cli npm install g vue cli?target directory exists.continu...
Vue 自定義元件
元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...
Vue 自定義元件
元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...