vue组件

vue组件

父组件向子组件传值

1. 子组件设置组件名
2. 子组件设置props：
   • 定义名称
   • 可设置默认值
   • 可指定规则
3. 父组件调用子组件名，绑定数值即可

<help-system :belong-module="helpMsg.belongModule[0]"
                       :help-note="helpMsg.helpNode[0]">
</help-system>

data

helpMsg: {
          belongModule: ['helpSystem', 'helpSystem', 'helpSystem'],
          helpNode: ['addNew', 'mapField', 'mapTable'],
          promptMessage: []
        },

子组件接收

props: {
      belongModule: {
        type: String,
        require: true
      },
      helpNote: {
        type: String,
        require: true
      },
      promptMessage: {
        type: String,
        default: '点击显示详细信息'
      }

子组件向父组件传值

1. 子组件绑定一个事件

2. 通过这个事件，使用$emit方法(name，value)，其中name与子组件当时绑定的事件名称相同，value为接受传递过来的数值，也可以直接用方法名来接受数值

   参考文档

v-html

文本可以解析html标签，然后显示

关于防XSS注入

可以采用对javascript进行匹配，这里再后端进行实现

String contrastString = "javascript";
helpContent = helpContent.toLowerCase();
if (helpContent.indexOf(contrastString) != -1)
    return "XSS";

面包屑

由于html中的标签都可以进行点击，因此对面包屑的每一级采用div分隔开，并且用@click进行触发。

由于要频繁的切换，不采用v-if而采用v-show，利用标记符号，实现想要

[外链图片转存失败(img-ArDWCNQi-1569207388229)(http://py425krhe.bkt.clouddn.com/blog/20190920/vntP9qhsMeBP.png?imageslim)]

其他tips

1. v-if与v-else要成对出现
2. 子组件只能有一个节点，因此可以采用div包括起来的形式
3. 样式问题和程序代码问题要区分。