WEB前端
3 篇文章
WEB前端
vue 父子组件利用计算属性传递信息
- 内容参考 vue官网-组件基础 https://cn.vuejs.org/v2/guide/components.html 以下只是我一些不成熟的理解,建议大概扫一眼官网文档再阅读 #### 父组件传递给子组件 > 子组件定义自定义参数(Prop),父组件传参。 当子组件增加一个prop属性 那么对应的函数名就是你自定义的参数 - 子组件 ```html <template> <v-md-editor/> </template> <script> export default { props: { # 自定义String类型参数text,父组件就可以使用`v-bind:text` 传值 text: String } </script> ``` 如上代码,在父组件引用子组件的时候,加上:text="xxx",就已经把xxx以参数形式传递给子组件了(如下) - 父组件 ```html <markdown :text="xxx" /> // :text 与 v-bind:text 同等含义 <script> # 注册子组件 import Markdown from '@/components/Markdown' export default { components: { Markdown } } </script> ``` #### 子组件传递给父组件 > 子组件使用内建方法`$emit`。 子组件通过调用内建`$emit`方法并传入事件名称来触发一个事件,达到子组件传递给父组件的目的 - 子组件 ```html <script> export default { # 自定义指令'getChildrenText' 并将子组件的data函数中的childrenText属性,通过参数传递给父组件 mounted() { this.$emit('getChildrenText', this.childrenText) } } </script> ``` - 父组件 ```html <markdown @getChildrenText="getChildrenText" /> <script> export default { methods: { # 也就是使用自定义指令的地方'@getText'会接收到子组件的childrenText getChildrenText(val) { # val为上个代码块的参数'this.childrenText' this.fatherText = val # 让父组件的值等于子组件传递过来的值 } } </script> ```
vue 重写element ui样式的遇到的问题
### 需求描述 重写element-ui 按钮`<button>`内部嵌套的`<span>`的样式 无奈用了css内部选择器也无法实现 请教别人以后,发现有以下三种做法 ### 解决办法 1. 在`App.Vue`中使用css内部选择器 > 不推荐 缺点 代码不符合规范,如果此类需求过多,App.Vue会很乱。 并且 如果使用`特性选择器`的时候 会很慢; 2. 删除掉`<style scoped>` 中的`scoped` 这样就会生效 > 不推荐 缺点 同上; 如果没有限制好特定作用域的话 容易产生样式覆盖 3. 使用Vue 提供的深度选择器 > 推荐 不会产生上述情况 只对当前作用域生效 ```html <style scoped> .parent >>> .child { /* ... */ } </style> ``` 将会编译成: ```css .parent[data-v-f3f3eg9] .child { /* ... */ } ``` 而对于less或者sass等预编译,是不支持>>>操作符的,可以使用/deep/来替换>>>操作符,例如: ```css .parent /deep/ .child { /* ... */ } ``` ### `scoped`的原理 细心的小伙伴会发现上述代码编译后 会增加[data-v-******]的东东,其实Vue就是根据这个确定作用域的, 这也就是`scoped`的原理
JavaScript 报$ is not a function 的问题的解决方法
出现这个问题就是代表 Jquery没有正确引入。 因为Jquery 官方引用符号就是$符号。 所以问题就是Jquery相关的问题。其实就是没有正确的导入。我们调整一下JS文件的引入顺序就好了。Jquery文件要最先引入。 转载来自:[js报$ is not a function 的问题的解决方法](https://blog.csdn.net/yintianqin/article/details/59102987) 相关坑点:引用JavaScript文件一定要用带回括号的script标签引入 ```js <script type="text/javascript" src="jquery.js"></script> ``` 切记不能使用以下样式 ```js <script src="jquery.js" /> ``` 这种结果就不能正确引入JavaScript文件
01
文章聚合
Hello,August
Hello,May
Hello,July