子父雙表樹型grid組件javascript源碼

父雙表樹型grid組件javascript源碼, 拿走不謝～

先看pc端demo（下載后獲得組件源碼和使用API）

http://kgo-js.com/htmls/twintreegridsample.html

vue搭建項目的時候，會有父組件和子組件，你有沒有思考一下當我想要得到父組件或者子組件的數據時，該怎么實現父組件和子組件之間的通訊呢？如果知道的話，那太nice啦，不太清楚的話那就往下看吧~ 正文我們通過實現下面的小demo來介紹父組件和子組件之間的通訊吧~

添加圖片注釋，不超過 140 字（可選）

父組件傳子組件

兩種方式：

添加圖片注釋，不超過 140 字（可選）

父組件中存放列表數據和input，子組件來實現渲染列表，傳列表給子組件

父組件通過:list="list"將list傳給子組件

 <Child :list="list"></Child>

子組件通過defineProps接收父組件傳入的list：

defineProps({
  list: {
      type: Array,
      default: ()=> [] // 默認值
  }
});

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: ()=> [] // 默認值
  }
});
</script>

<style lang="css" scoped>

</style>

父組件存放input，子組件放列表并實現渲染，父組件傳input內的值給子組件

父組件通過定義一個變量toChild，將value賦值給toChild
通過:msg="toChild"將toChild以msg傳遞給子組件

  <Child :msg="toChild"></Child>

子組件通過 defineProps接收msg

const props=defineProps({
  msg:''
});

通過watch來監聽msg，對列表數據進行更新

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>

子組件傳父組件

子組件中存放input，父組件中存放數據清單并渲染數據

添加圖片注釋，不超過 140 字（可選）

第一種方法

子組件創建一個add1事件

const emits=defineEmits(['add1']); // 創建一個add事件

子組件在add函數中發布事件，并傳入數據value

const add=()=> {
  // 將value給到父組件
emits('add1', value.value);// 發布事件
}

在父組件中訂閱事件add1

 <Child @add1="handle"></Child>

當觸發add1事件時，也就是點擊增加時觸發handle函數

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']); // 創建一個add事件

const add=()=> {
  // 將value給到父組件
emits('add1', value.value);// 發布事件
}
</script>

<style lang="css" scoped>

</style>

第二種方法

父組件通過 v-model:list="list"將list傳給子組件

 <Child v-model:list="list"></Child>

子組件通過props接收list

const props=defineProps({
  list:{
    type: Array,
    default: ()=> []
  }
});

子組件可以直接在add函數通過props.list.push(value.value);來實現對列表數據的更新，但是不太建議這種方法，不太建議直接操作父組件給過來的數據，這樣的話代碼的可維護性比較差子組件通過使用defineEmits來新建一個emits函數，該函數用于告知父組件，子組件希望更新一個名為 list 的數據，再新建一個變量arr來接收list，來更新arr，再通過emits('update:list', arr);來實現對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);// 不建議直接操作父組件給過來的數據

const arr=props.list;
arr.push(value.value);
emits('update:list', arr);
}
</script>

<style lang="css" scoped>

</style>

第三種方法

將列表數據存放在子組件中：

子組件通過defineExpose({list});將list暴露出來
父組件通過ref="childRef"賦予了一個名字為childRef的引用

 <Child ref="childRef"></Child>

父組件通過 const childRef=ref(null);創建一個響應式的引用（ref）對象childRef
通過(item, index) in childRef?.list來遍歷列表數據

 <div class="child">
        <ul>
            <li v-for="(item, index) in childRef?.list" :key="index">{{ item }}</li>
        </ul>
    </div>

-childRef?.list 這是一種安全訪問屬性的方式，避免了嘗試訪問undefined或null對象的屬性時拋出錯誤，也就是只有當childRef不為null或undefined時，才會嘗試訪問其list屬性，因為此時子組件可能尚未被創建或掛載，直接訪問childRef.list會導致錯誤，因為null或undefined沒有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>

結語

父子組件通訊 --- 父組件用v-bind綁定傳給子組件，子組件用defineProps接收數據
子父組件通訊 --- 子組件用defineEmits創建一個事件，在發布該事件時傳入數據，父組件通過v-on來訂閱該事件
子父組件通訊 --- 父組件借助v-model將數據綁定給子組件，子組件創建'update:xxx'事件，并將接收到的數據修改后emits出來
子父組件通訊 --- 父組件通過ref獲取子組件中的defineExpose()暴露出來的數據

2第一章筆記

11盒子模型

1. border-style:solid(實線)/dashed(虛線)/dotted(點劃線)/double(雙線)

2. padding 內容區域距離邊框

3. padding會撐開原有盒子的寬、高所以我們要減去padding的長度

4. padding的屬性值4種方式：上右下左、上左右下、上下左右、一個值四個方向（可以單獨設置某一邊）

5. 如果出現邊框塌陷那么：overflow:hidden；

12盒子模型

1. margin 塊與塊之間的位置

2. margin: 0 auto

3. margin-top;設置時，如果子父都設置了margin，子的margin會傳遞到父的margin，例如：

解決方法：在父元素加入：overflow:hidden；

4. margin與padding

1. margin框架與框架之間、塊與塊之間、盒子與盒子、

2. padding盒子內部

13文本溢出

1. 語法{overflow:visible/hidden/scroll/auto/inherit;}

說明：

visible:默認值，內容不會被修剪，會出現在元素框之外。

hidden:內容會被修剪，并且其余內容是不可見的；

sorcll:內容會被修剪，但瀏覽器會顯示滾動條，以便查看其余的內容；

auto:如果內容被修剪，則瀏覽器會顯示滾動條，以便看見其他的內容；

inherit:規定應該從父元素繼承overflow屬性的值。

2. 語法{white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;}

normal:默認。空白會被瀏覽器忽略。

pre:空白會被瀏覽器保留。

nowrap:文本不會換行，文本會在在同一行上繼續，直到遇到<br>標簽為止。

pre-wrap:保留空白符序列，但是正常的進行換行

pre-line：合并空白符序列，但保留換行符。

inherit：規定應該從父元素繼承white-space屬性的值。

14文本溢出

1. 語法{text-overflow:clip/ellipsis;}

clip：不顯示省略號，而是簡單的裁剪。

ellipsis：當對象內文本沒有溢出時，顯示省略標記。

2. 使用ellipsis時需要配合下面：

width:10px;容器的寬，

white-space:nowrap;強制文本在一行內顯示，

overflow:hidden; 溢出內容為隱藏，

text-overflow:ellipsis; 溢出文本顯示省略號，

在線咨詢

上一篇：最不“走心”小工具都在這里了，你到底看中了哪個？
下一篇：作為程序員，如何將你的VSCode打造的更優雅

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

子父雙表樹型grid組件javascript源碼

父組件傳子組件

父組件中存放列表數據和input，子組件來實現渲染列表，傳列表給子組件

父組件存放input，子組件放列表并實現渲染，父組件傳input內的值給子組件

子組件傳父組件

子組件中存放input，父組件中存放數據清單并渲染數據

第一種方法

第二種方法

第三種方法

2第一章筆記

11盒子模型

12盒子模型

13文本溢出

14文本溢出

您的項目需求