div添加样式 vue_VUE 开发总结笔记

亦凉 2023-01-02 01:15 175阅读 0赞

![72679d9fac8a63680f10afd0b2b89b20.png][]

vue开发过程中遇到的一些问题和总结，都是入门时可能会遇到的问题。

\#\#Vue动态添加新的属性到实例上

当我们去看vue文档的时候，发现如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。比如我们我们开始创建了一个对象实例，在实例创建之后为其增加新的属性，我们发现这个属性不能生效,此时需要使用this.$set(')方法。

\`\`\`javascript

</template>

import viewMore from 'viewMore.vue'

export default \{

components: \{

more: viewMore

\},

data() \{

return \{

people ：\{\}

\},

created()\{

this.$set(people , 'age','12');

</script>

\`\`\`

\#\#组件开发遇到的问题

\- \*\*组件的开发和引用\*\*

当我们将项目中公用的块，或者页面中多处样式一样，只是数据展示不同的地方抽取出一个个公用组件时，可以提高我们的开发效率，避免重复的工作，只需要在不同的页面引入公用的组件即可。创建一个viewMore.vue文件，定义一个组件块。

\`\`\`javascript

</template>

export default \{

components: \{\},

data() \{

return \{

</script>

可以定义组件都有的样式

</style>

\`\`\`

这样就可以在其它组件引用了，引用方式很简单：例如在index.vue中引进viewMore.vue组件，假设两个文件处在同级目录中。

index.vue中的代码：

\`\`\`javascript

</template>

import viewMore from 'viewMore.vue'

export default \{

components: \{

more: viewMore

\},

data() \{

return \{

</script>

\`\`\`

\- \*\*组件之间传值，父组件传值给子组件和子组件传值给父组件\*\*

\- \*\*父组件传值给子组件 （:messageInfo='message'）\*\*

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

例如我们在index.vue中定义一个字段，或者是ajax请求到的数据需要传递给子组的做法如下：

父组件：index.vue:

\`\`\`javascript

</template>

import viewMore from 'viewMore.vue'

export default \{

components: \{

more: viewMore

\},

data() \{

return \{

message: 'hello world'

</script>

\`\`\`

子组件：viewMore.vue

\`\`\`javascript

</template>

export default \{

components: \{\},

data() \{

return \{

\},

props: \{

//获取父组件传递的参数

messageInfo: \{

type: String

\},

</script>

可以定义组件都有的样式

</style>

\`\`\`

\- \*\*子组件传值给父组件 （this.$emit('postDataToParentMethod','hello world')）\*\*

例如在我们现在需要将子组件中的一个值传递给父组件，平时项目中的情况可能是，在子组件触发一个事件时，或者一个ajax调用完成是需要把数据传递给父组件，我们这里简单的模拟一个点击是事件，做法如下：

子组件：viewMore.vue

\`\`\`javascript

</template>

export default \{

components: \{\},

data() \{

return \{

\},

props: \{

//获取父组件传递的参数

messageInfo: \{

type: String

\},

methods: \{

postDataToParent: function (event) \{

// 给父组件传值

this.$emit('postDataToParentMethod','hello world');

</script>

可以定义组件都有的样式

</style>

\`\`\`

父组件获取子组件的值：父组件 index.vue

\`\`\`javascript

</more>

</template>

import viewMore from 'viewMore.vue'

export default \{

components: \{

more: viewMore

\},

data() \{

return \{

message: 'hello world',

childData:''

\},

methods: \{

getDate(data)\{

this.childData=data

</script>

\`\`\`

我么可以根据实际情况灵活使用子父组件之间的传递值来完成交互。

\- \*\*子组件在父组件中的点击事件\*\*

如果需要在父组件中点击子组件，那么需要使用，

@click.native="viewMoreQueryKnowledge()"来触发事件。

[72679d9fac8a63680f10afd0b2b89b20.png]: /images/20221120/e1fe43a1188f435c9443b33304e1eb8c.png

div添加样式 vue_VUE 开发总结笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 div靠边隐藏_div css隐藏内容样式方法

相关 div添加样式 vue_vue.js

相关 div添加样式 vue_VUE 开发总结笔记

相关 CSS样式——div居中方法

相关 css样式笔记总结

相关 div添加样式 vue_vue如何给组件加css样式

相关 div添加水印

相关给div动态添加样式

相关 CSS.DIV网页样式与布局总结

相关 vue工作开发总结（三）---- 样式穿透