前端项目的N个point（第二期）1.使用:global重写组件库原生样式直接使用选择器重写组件库样式较为繁琐且不易生

1.使用:global重写组件库原生样式

直接使用选择器重写组件库样式较为繁琐且不易生效，使用:global可以重写组件库样式
由于:global 会使得样式变为全局样式，在当个视图文件中使用时，最好套上父组件
```
:global(div.cardForm div.ant-form-item) { 
  margin: 1rem 0;
}
```

2.Vue click事件传递参数

只传递自定义参数

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>

<div id="app">
    <button @click="clickHere('hello')">点我</button>
</div>

<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("参数：");
                console.log(param1);
            }
        }
    })
</script>

</body>
</html>

只传递事件参数

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>

<div id="app">
    <button @click="clickHere">点我</button>
    <!--等价于下边这个-->
    <!--<button @click="clickHere($event)">点我</button>-->
</div>

<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (e) {
                console.log("事件：");
                console.log(e);
            }
        }
    })
</script>

</body>
</html>

传递事件参数和自定义参数

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>

<div id="app">
    <button @click="clickHere($event, 'hello')">点我</button>
</div>

<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (event, param1) {
                console.log("事件：");
                console.log(event);
                console.log("参数：");
                console.log(param1);
            }
        }
    })
</script>

</body>
</html>

动态参数（从局部取值）

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>

<div id="app">
    <div v-for="hero in heros">
        <button @click="clickHere(hero.name)">点我</button>
    </div>
</div>

<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("参数：");
                console.log(param1);
            }
        },
        data: {
            heros: [{
                name: "Iron Man",
                age: 30
            }, {
                name: "Captain America",
                age: 40
            }]
        }
    })
</script>

</body>
</html>

动态参数（从全局数据取值）

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>

<div id="app">
    <button @click="clickHere({message})">点我</button>
</div>

<script src="js/vue.js"></script>
<script>Vue.config.productionTip = false</script>
<script>
    let vm = new Vue({
        el: '#app',
        methods: {
            clickHere: function (param1) {
                console.log("参数：");
                console.log(param1);
            }
        },
        data: {
            message: "hello world"
        }
    })
</script>

</body>
</html>