Vue組件的操做-自定義組件，動態組件，遞歸組件

做者 | Jeskson

來源 | 達達前端小酒館

v-model雙向綁定

建立雙向數據綁定，v-model指令用來在input，select，checkbox，radio等表單控件。v-model指令在內部使用不一樣的屬性爲不一樣的輸入元素拋出不一樣的事件。

v-mdel指令實現數據的雙向綁定：

<div>
 用戶名：<input type="text" v-model="name">
</div>

輸入用戶名是：{{name}}

<div id="app">

<div>
 用戶名：
 <input type="text" v-bind:value="name"
 @input="name = $event.target.value">
</div>

用戶名：{{name}}

組件中的表單控件：

<input type="text" value="value"
@input = "handleinput($event.target.value)">

自定義組件，父組件的input事件須要經過$emit參數：

<input type="text" value="value"
@input = "handleinput($event.target.value)">

handleinput: function(){
 // 向父組件觸發input事件
 this.$emit('input, value');
}

<div>
自定義組件雙向綁定
<my-component v-model="dashucoding">
</my-component>

v-model指令進行雙向數據綁定：

<div id="app">
<div>
<h1>v-model工做原理</h1>
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value">
<div>name={{name}}</div>
</div>
<div>
父組件
<my-component v-model="name"></my-component>
</div>
</div>

<template id="my-component">
<div>
組件中
<div>
<input type="text" v-bind:value="value"
v-on:input="handleInput($event.target.value)">
</div>
</div>
</template>

<script>
//建立組件
const MyComponent = {
template: '#my-component",
props: ['value'],
methods: {
 handleInput: function(val){
  this.$emit('input',val);
 }
}
};
// 建立vue實例對象
const app = new Vue({
 el: '#app',
 data: {
  name: ''
 },
 components: {
  MyComponent
 }
});
</script>

動態組件，動態地切換組件的顯示內容，多個組件能夠使用同一個掛載點。

<div id="app">
<div>
<button @click="currentComponent = 'C1Component'">
c1
</button>
<button @click="currentComponent = 'C2Component'">
c2
</button>

// 使用動態組件
<keey-alive>
<component v-bind:is="currentComponent">
</component>
</keey-alive>

</div>
</div>

<template id="c1">
<div>
this is c1
<div>
 name:<input type="text">
</div>
</div>
</template>

<template id="c2">
<div>
this is c2
</div>
</template>

<script>
// 定義組件
const C1Component = {
 template: '#c1'
};

const C2Component = {
 template: '#c2'
};

// vue實例對象
const app = new Vue({
 el: '#app',
 data: {
  currentComponent: 'C1Component'
 },
 components: {
  C1Component,
  C2Component,
 }
});
</script>

遞歸組件，須要有一個結束的判斷，不然就會一直循環。

<template id="menu-component">
<ul>
<li v-for="item in menus">
{{item.name}}
<menu-component v-if="item.children" :menus="item.children">
</menu-component>
</li>
</ul>
</template>

建立組件：

const MenuComponent = {
 name: 'MenuComponent',
 template: '#menu-component',
 props: ['menus']
}

<div id="app">
<menu-component :menus="menus">
<menu-component>
</div>

<template id="menu-component">
<ul>
<li v-for="item in menus">
{{item.name}}
<menu-component v-if="item.children" :menus="item.children">
</menu-component>
</li>
</ul>
</template>

❤️ 不要忘記留下你學習的腳印 [點贊 + 收藏 + 評論]

做者Info：

【做者】：Jeskson
【原創公衆號】：達達前端小酒館。
【福利】：公衆號回覆 「資料」 送自學資料大禮包（進羣分享，想要啥就說哈，看我有沒有）！
【轉載說明】：轉載請說明出處，謝謝合做！~

大前端開發，定位前端開發技術棧博客，PHP後臺知識點，web全棧技術領域，數據結構與算法、網絡原理等通俗易懂的呈現給小夥伴。謝謝支持，承蒙厚愛！！！

---

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

---

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的CSDN！

這是一個有質量，有態度的博客