父传子
1.组件结构
展示部分:<template>此标签内只允许有一个根标签<template/>
逻辑部分:<script>
用来导出组件
export default{
name:'someName',
data(){
return{}
}
}
<script/>
样式部分:<style 这里有一个属性scoped >scoped样式只在当前组件内生效<style/>
2.组件复用
引入一个组件的操作:
(1):在<script>中 引入==>> import 自定义组件名 from '文件路径(可以是相对路径<推荐>或绝对路劲)';
(2):在components对象中注册声明 ==>>components:{同上面引入时的自定义组件名,多 个组件用逗号隔开},
与name data同级位置
components: { 'table-single-col': tableSingleCol, tableSplit},
默认驼峰
(3):在<template>里面用标签的形式使用==<自定义组件名同上/>
例: <template>
<table-single-col></table-single-col>
<template/>
或根据大写字母(驼峰)位置用-分开将大写转为小写
3.组件间传值
父组件(相对于被引用的组件),子组件(被引用的组件);
(1):父组件向子组件传值
在父组件中子组件标签内,使用双向绑定的形式传递,
<child :msg='sum' /> 传递一父组件中的sum值
在子组件中用props接收,与data同级的位置
props:['msg',多个值用逗号隔开]
(2):子组件向父组件传值
(1):子组件中 this.$emit('自定义key',要传的值),将其放在一个可激发的函数里,
父组件在子组件标签里
定义一个于自定义key命名相同的事件(@自定义key),激发一个函数,函数中传的值就是子组件传递过来的值;
<child @自定义key='getMsg'/>
methods:{
getMsg(data){传送过来的值 = data}
}
浪客行1213的简书
xhh
