前言
為了簡(jiǎn)化拆分復(fù)雜的代碼邏輯，和實(shí)現(xiàn)代碼的組件化，封閉化。我們需要使用組件化的方法。我這里只講解我感覺(jué)最優(yōu)的組件化方法。
相關(guān)文章
vue組件化總結(jié)
vue 單文件組件
子組件修改Props報(bào)錯(cuò)
vue 父組件調(diào)用子組件方法ref
vue中組件的props屬性（詳）
組件化實(shí)戰(zhàn)
使用Vue-cil搭建一個(gè)簡(jiǎn)單的Vue頁(yè)面，如何搭建不展開(kāi)
如何引入組件
Vue的路由管理不展開(kāi)說(shuō)明
子組件
<template>
<div>
<h1>我是子組件</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
},
};
</script>
<style lang="scss"></style>
父組件代碼
<template>
<div>
<h1>我是父組件</h1>
<TestComponent />
</div>
</template>
<script>
//引用子組件
import TestComponent from '@/components/TestComponent.vue';
export default {
data() {
return {
};
},
components:{
TestComponent
},
methods: {
},
};
</script>
<style lang="scss"></style>
實(shí)現(xiàn)效果
什么是父組件，什么是子組件
| 父組件 | 子組件 | |
|---|---|---|
| 包含關(guān)系 | 外層 | 里層 |
| 調(diào)用關(guān)系 | 使用 | 被調(diào)用 |
| 傳遞關(guān)系 | 父能傳子，控制子組件 | 子不能直接傳父，單向流通 |
如何實(shí)現(xiàn)給子組件賦值
使用Props屬性
子組件修改Props報(bào)錯(cuò)
vue中組件的props屬性（詳）
子組件添加
export default {
//將屬性暴露給父組件，這里暴露了name屬性
props:['name'],
data() {
return {}
},
methods: {
},
};
父組件賦值
<!-- 在標(biāo)簽中賦值 -->
<TestComponent name="我設(shè)置子組件屬性" />
效果
動(dòng)態(tài)賦值可以使用v-bind方法
完整代碼
TestComponent
<template>
<div>
<h1>我是子組件</h1>
<h2>我是子組件name屬性:{{ name }}</h2>
</div>
</template>
<script>
export default {
//將屬性暴露給父組件，這里暴露了name屬性
props: ['name'],
data() {
return {}
},
methods: {
},
};
</script>
<style lang="scss"></style>
Test
<template>
<div>
<h1>我是父組件</h1>
<!-- 在標(biāo)簽中賦值，使用v-bind動(dòng)態(tài)修改 -->
<TestComponent :name="msg" />
<button @click="TestBtn">我修改組件屬性</button>
</div>
</template>
<script>
//引用子組件
import TestComponent from '@/components/TestComponent.vue';
export default {
data() {
return {
msg: '修改前'
};
},
components: {
TestComponent
},
methods: {
//添加按鈕事件動(dòng)態(tài)修改
TestBtn() {
this.msg = '修改后'
}
},
};
</script>
<style lang="scss"></style>
如何調(diào)用子組件方法
vue 父組件調(diào)用子組件方法ref
子組件不能直接修改props屬性，只能父組件修改
- 給子組件標(biāo)簽添加ref=“name”，name可以自定義
- 在代碼中使用this.$ref.name.method(子組件對(duì)應(yīng)方法名)
完整代碼
TestComponent
<template>
<div>
<h1>我是子組件</h1>
<h2>我是子組件name屬性:{{ name }}</h2>
</div>
</template>
<script>
export default {
//將屬性暴露給父組件，這里暴露了name屬性
props: ['name'],
data() {
return {}
},
methods: {
ChildBtn(){
console.log('我是子組件方法')
}
},
};
</script>
<style lang="scss"></style>
Test
<template>
<div>
<h1>我是父組件</h1>
<!-- 在標(biāo)簽中賦值，使用v-bind動(dòng)態(tài)修改 -->
<!-- 通過(guò)設(shè)置ref來(lái)調(diào)用子組件的方法 -->
<TestComponent :name="msg" ref="Test" />
<button @click="TestBtn">我調(diào)用子組件方法</button>
</div>
</template>
<script>
//引用子組件
import TestComponent from '@/components/TestComponent.vue';
export default {
data() {
return {
msg: '修改前'
};
},
components: {
TestComponent
},
methods: {
//添加按鈕事件動(dòng)態(tài)修改
TestBtn() {
console.log("開(kāi)始調(diào)用子組件方法")
this.$refs.Test.ChildBtn()
}
},
};
</script>
<style lang="scss"></style>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-528337.html
總結(jié)
這個(gè)是最簡(jiǎn)單快速的組件化方法，我們可以添加name屬性，props也也可以設(shè)置默認(rèn)和屬性檢測(cè)。大家可以網(wǎng)上自己搜索一下詳細(xì)的屬性設(shè)置。關(guān)鍵詞：組件化，父組件子組件，ref，props文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-528337.html
到了這里，關(guān)于Vue 如何簡(jiǎn)單快速組件化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
