父傳子
1.組件結(jié)構(gòu)
展示部分:<template>此標(biāo)簽內(nèi)只允許有一個根標(biāo)簽<template/>
邏輯部分:<script>
用來導(dǎo)出組件
export default{
name:'someName',
data(){
return{}
}
}
<script/>
樣式部分:<style 這里有一個屬性scoped >scoped樣式只在當(dāng)前組件內(nèi)生效<style/>
2.組件復(fù)用
引入一個組件的操作:
(1):在<script>中 引入==>> import 自定義組件名 from '文件路徑(可以是相對路徑<推薦>或絕對路勁)';
(2):在components對象中注冊聲明 ==>>components:{同上面引入時的自定義組件名,多 個組件用逗號隔開},
與name data同級位置
components: { 'table-single-col': tableSingleCol, tableSplit},
默認(rèn)駝峰
(3):在<template>里面用標(biāo)簽的形式使用==<自定義組件名同上/>
例: <template>
<table-single-col></table-single-col>
<template/>
或根據(jù)大寫字母(駝峰)位置用-分開將大寫轉(zhuǎn)為小寫
3.組件間傳值
父組件(相對于被引用的組件),子組件(被引用的組件);
(1):父組件向子組件傳值
在父組件中子組件標(biāo)簽內(nèi),使用雙向綁定的形式傳遞,
<child :msg='sum' /> 傳遞一父組件中的sum值
在子組件中用props接收,與data同級的位置
props:['msg',多個值用逗號隔開]
(2):子組件向父組件傳值
(1):子組件中 this.$emit('自定義key',要傳的值),將其放在一個可激發(fā)的函數(shù)里,
父組件在子組件標(biāo)簽里
定義一個于自定義key命名相同的事件(@自定義key),激發(fā)一個函數(shù),函數(shù)中傳的值就是子組件傳遞過來的值;
<child @自定義key='getMsg'/>
methods:{
getMsg(data){傳送過來的值 = data}
}
浪客行1213的簡書
xhh
