整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
父雙表樹(shù)型grid組件javascript源碼, 拿走不謝～
先看pc端demo（下載后獲得組件源碼和使用API）
http://kgo-js.com/htmls/twintreegridsample.html
vue搭建項(xiàng)目的時(shí)候，會(huì)有父組件和子組件，你有沒(méi)有思考一下當(dāng)我想要得到父組件或者子組件的數(shù)據(jù)時(shí)，該怎么實(shí)現(xiàn)父組件和子組件之間的通訊呢？如果知道的話，那太nice啦，不太清楚的話那就往下看吧~ 正文 我們通過(guò)實(shí)現(xiàn)下面的小demo來(lái)介紹父組件和子組件之間的通訊吧~
添加圖片注釋，不超過(guò) 140 字（可選）
兩種方式：
添加圖片注釋，不超過(guò) 140 字（可選）
<Child :list="list"></Child>子組件通過(guò)defineProps接收父組件傳入的list：
defineProps({
list: {
type: Array,
default: ()=> [] // 默認(rèn)值
}
});App.vue
<template>
<div class="input-group">
<input type="text" v-model="value">
<button @click="add">添加</button>
</div>
<Child :list="list"></Child>
</template>
<script setup>
import Child from '@/components/child.vue';
import { ref } from 'vue';
const list=ref(['html', 'css', 'js']);
const value=ref('');
const add=()=> {
list.value.push(value.value);
value.value='';
}
</script>
<style lang="css" scoped>
</style>child.vue
<template>
<div class="child">
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps({
list: {
type: Array,
default: ()=> [] // 默認(rèn)值
}
});
</script>
<style lang="css" scoped>
</style> <Child :msg="toChild"></Child>子組件通過(guò) defineProps接收msg
const props=defineProps({
msg:''
}); 通過(guò)watch來(lái)監(jiān)聽(tīng)msg，對(duì)列表數(shù)據(jù)進(jìn)行更新
watch(
()=> props.msg,
(newValue, oldValue)=> {
list.value.push(newValue);
}
);App.vue
<template>
<div class="input-group">
<input type="text" v-model="value">
<button @click="add">添加</button>
</div>
<Child :msg="toChild"></Child>
</template>
<script setup>
import Child from '@/components/child.vue';
import { ref } from 'vue';
const list=ref(['html', 'css', 'js']);
const value=ref('');
const toChild=ref('');
const add=()=> {
toChild.value=value.value;
}
</script>
<style lang="css" scoped>
</style>child.vue
<template>
<div class="child">
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script setup>
import {ref, watch} from 'vue';
const list=ref(['html', 'css', 'js']);
const props=defineProps({
msg:''
});
watch(
()=> props.msg,
(newValue, oldValue)=> {
list.value.push(newValue);
}
);
</script>
<style lang="css" scoped>
</style>添加圖片注釋，不超過(guò) 140 字（可選）
const emits=defineEmits(['add1']); // 創(chuàng)建一個(gè)add事件子組件在add函數(shù)中發(fā)布事件，并傳入數(shù)據(jù)value
const add=()=> {
// 將value給到父組件
emits('add1', value.value);// 發(fā)布事件
} 在父組件中訂閱事件add1
<Child @add1="handle"></Child> 當(dāng)觸發(fā)add1事件時(shí)，也就是點(diǎn)擊增加時(shí)觸發(fā)handle函數(shù)
const handle=(event)=> {
list.value.push(event);
}App.vue
<template>
<!-- 訂閱add1事件 -->
<Child @add1="handle"></Child>
<div class="child">
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script setup>
import Child from '@/components/child2.vue';
import { ref } from 'vue';
const list=ref(['html', 'css', 'js']);
const handle=(event)=> {
list.value.push(event);
}
</script>
<style lang="css" scoped>
</style>child.vue
<template>
<div class="input-group">
<input type="text" v-model="value">
<button @click="add">添加</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value=ref('');
const emits=defineEmits(['add1']); // 創(chuàng)建一個(gè)add事件
const add=()=> {
// 將value給到父組件
emits('add1', value.value);// 發(fā)布事件
}
</script>
<style lang="css" scoped>
</style> <Child v-model:list="list"></Child>子組件通過(guò)props接收list
const props=defineProps({
list:{
type: Array,
default: ()=> []
}
}); 子組件可以直接在add函數(shù)通過(guò)props.list.push(value.value);來(lái)實(shí)現(xiàn)對(duì)列表數(shù)據(jù)的更新，但是不太建議這種方法，不太建議直接操作父組件給過(guò)來(lái)的數(shù)據(jù)，這樣的話代碼的可維護(hù)性比較差 子組件通過(guò)使用defineEmits來(lái)新建一個(gè)emits函數(shù)，該函數(shù)用于告知父組件，子組件希望更新一個(gè)名為 list 的數(shù)據(jù)，再新建一個(gè)變量arr來(lái)接收list，來(lái)更新arr，再通過(guò)emits('update:list', arr);來(lái)實(shí)現(xiàn)對(duì)list的更新
const emits=defineEmits(['update:list']);
const add=()=> {
const arr=props.list;
arr.push(value.value);
emits('update:list', arr);
}App.vue
<template>
<Child v-model:list="list"></Child>
<div class="child">
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script setup>
import Child from '@/components/child3.vue';
import { ref } from 'vue';
const list=ref(['html', 'css', 'js']);
</script>
<style lang="css" scoped>
</style>child.vue
<template>
<div class="input-group">
<input type="text" v-model="value">
<button @click="add">添加</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value=ref('');
const props=defineProps({
list:{
type: Array,
default: ()=> []
}
});
const emits=defineEmits(['update:list']);
const add=()=> {
// props.list.push(value.value);// 不建議直接操作父組件給過(guò)來(lái)的數(shù)據(jù)
const arr=props.list;
arr.push(value.value);
emits('update:list', arr);
}
</script>
<style lang="css" scoped>
</style>將列表數(shù)據(jù)存放在子組件中：
<Child ref="childRef"></Child> <div class="child">
<ul>
<li v-for="(item, index) in childRef?.list" :key="index">{{ item }}</li>
</ul>
</div>-childRef?.list 這是一種安全訪問(wèn)屬性的方式，避免了嘗試訪問(wèn)undefined或null對(duì)象的屬性時(shí)拋出錯(cuò)誤，也就是只有當(dāng)childRef不為null或undefined時(shí)，才會(huì)嘗試訪問(wèn)其list屬性，因?yàn)榇藭r(shí)子組件可能尚未被創(chuàng)建或掛載，直接訪問(wèn)childRef.list會(huì)導(dǎo)致錯(cuò)誤，因?yàn)?/span>null或undefined沒(méi)有list屬性 App.vue
<template>
<Child ref="childRef"></Child>
<div class="child">
<ul>
<li v-for="(item, index) in childRef?.list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script setup>
import Child from '@/components/child4.vue';
import { ref } from 'vue';
const childRef=ref(null);
</script>
<style lang="css" scoped>
</style>child.vue
<template>
<div class="input-group">
<input type="text" v-model="value">
<button @click="add">添加</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value=ref('');
const list=ref(['html', 'css', 'js']);
const add=()=> {
list.value.push(value.value);
}
defineExpose({list});//==> defineExpose({list: list}); 心甘情愿暴露出list
</script>
<style lang="css" scoped>
</style>結(jié)語(yǔ)
1. border-style:solid(實(shí)線)/dashed(虛線)/dotted(點(diǎn)劃線)/double(雙線)
2. padding 內(nèi)容區(qū)域距離邊框
3. padding會(huì)撐開(kāi)原有盒子的寬、高所以我們要減去padding的長(zhǎng)度
4. padding的屬性值4種方式：上 右 下 左、上 左右 下、上下 左右、 一個(gè)值四個(gè)方向（可以單獨(dú)設(shè)置某一邊）
5. 如果出現(xiàn)邊框塌陷那么：overflow:hidden；
1. margin 塊與塊之間的位置
2. margin: 0 auto
3. margin-top;設(shè)置時(shí)，如果子父都設(shè)置了margin，子的margin會(huì)傳遞到父的margin，例如：
解決方法：在父元素加入：overflow:hidden；
4. margin與padding
1. margin框架與框架之間、塊與塊之間、盒子與盒子、
2. padding盒子內(nèi)部
1. 語(yǔ)法{overflow:visible/hidden/scroll/auto/inherit;}
說(shuō)明：
visible:默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)出現(xiàn)在元素框之外。
hidden:內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的；
sorcll:內(nèi)容會(huì)被修剪，但瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余的內(nèi)容；
auto:如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條，以便看見(jiàn)其他的內(nèi)容；
inherit:規(guī)定應(yīng)該從父元素繼承overflow屬性的值。
2. 語(yǔ)法{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}
normal:默認(rèn)。空白會(huì)被瀏覽器忽略。
pre:空白會(huì)被瀏覽器保留。
nowrap:文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到<br>標(biāo)簽為止。
pre-wrap:保留空白符序列，但是正常的進(jìn)行換行
pre-line：合并空白符序列，但保留換行符。
inherit：規(guī)定應(yīng)該從父元素繼承white-space屬性的值。
1. 語(yǔ)法{text-overflow:clip/ellipsis;}
clip：不顯示省略號(hào)，而是簡(jiǎn)單的裁剪。
ellipsis：當(dāng)對(duì)象內(nèi)文本沒(méi)有溢出時(shí)，顯示省略標(biāo)記。
2. 使用ellipsis時(shí)需要配合下面：
width:10px;容器的寬，
white-space:nowrap;強(qiáng)制文本在一行內(nèi)顯示，
overflow:hidden; 溢出內(nèi)容為隱藏，
text-overflow:ellipsis; 溢出文本顯示省略號(hào)，
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
