父传子

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