浅谈vue的props,data,computed变化对组件更新的影响
2018-01-16 09:50
906 查看
本文介绍了vue的props,data,computed变化对组件更新的影响,分享给大家,废话不多说,直接上代码
/** this is Parent.vue */ <template> <div> <div>{{'parent data : ' + parentData}}</div> <div>{{'parent to children1 props : ' + parentToChildren1Props}}</div> <div>{{'parent to children2 props : ' + parentToChildren2Props}}</div> <div> <el-button @click="changeParentData">change parent data</el-button> <el-button @click="changeParentToChildren1Props">change parent to children1 data</el-button> <el-button @click="changeParentToChildren2Props">change parent to children2 data</el-button> </div> <my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1> <my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2> </div> </template> <script> import Children1 from './Children1'; import Children2 from './Children2'; export default{ name: 'parent', data() { return { parentData: 'ParentData', parentToChildren1Props: 'ParentToChildren1Props', parentToChildren2Props: 'ParentToChildren2Props' } }, beforeCreate: function() { console.log('*******this is parent beforeCreate*********'); }, created: function() { console.log('######this is parent created######'); }, beforeMount: function() { console.log('------this is parent beforeMount------'); }, mounted: function() { console.log('++++++this is parent mounted++++++++'); }, beforeUpdate: function() { console.log('&&&&&&&&this is parent beforeUpdate&&&&&&&&'); }, updated: function() { console.log('$$$$$$$this is parent updated$$$$$$$$'); }, methods: { changeParentData: function() { this.parentData = 'changeParentData' }, changeParentToChildren1Props: function() { this.parentToChildren1Props = 'changeParentToChildren1Props' }, changeParentToChildren2Props: function() { this.parentToChildren2Props = 'changeParentToChildren2Props' } }, components: { 'my-children1': Children1, 'my-children2': Children2 } } </script>
/** this is Children1.vue */ <template> <div> <div>{{'children1 data : ' + children1Data}}</div> <div>{{'parent to children1 props : ' + children1Props}}</div> <div>{{'parent to children1 props to data : ' + children1PropsData}}</div> <div> <el-button @click.native="changeChildren1Data">change children1 data</el-button> <el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button> </div> </div> </template> <script> export default { name: 'children1', props: ['children1Props'], data() { return { children1Data: 'Children1Data' } }, computed: { children1PropsData: function() { return this.children1Props } }, beforeCreate: function() { console.log('*******this is children1 beforeCreate*********'); }, created: function() { console.log('######this is children1 created######'); }, beforeMount: function() { console.log('------this is children1 beforeMount------'); }, mounted: function() { console.log('++++++this is children1 mounted++++++++'); }, beforeUpdate: function() { console.log('&&&&&&&&this is children1 beforeUpdate&&&&&&&&'); }, updated: function() { console.log('$$$$$$$this is children1 updated$$$$$$$$'); }, methods: { changeChildren1Data: function() { this.children1Data = 'changeChildren1Data' }, emitParentToChangeChildren1Props: function() { console.log('emitParentToChangeChildren1Props'); this.$emit('changeParentToChildren1Props'); } } } </script>
/** this is Children2.vue */ <template> <div> <div>{{'children2 data : ' + children2Data}}</div> <div>{{'parent to children2 props : ' + children2Props}}</div> <div>{{'parent to children2 props to data : ' + children2PropsData}}</div> <div> <el-button @click.native="changeChildren2Data">change children2 data</el-button> <el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button> </div> </div> </template> <script> export default { name: 'children2', props: ['children2Props'], data() { return { children2Data: 'Children2Data', children2PropsData: this.children2Props } }, beforeCreate: function() { console.log('*******this is children2 beforeCreate*********'); }, created: function() { console.log('######this is children2 created######'); }, beforeMount: function() { console.log('------this is children2 beforeMount------'); }, mounted: function() { console.log('++++++this is children2 mounted++++++++'); }, beforeUpdate: function() { console.log('&&&&&&&&this is children2 beforeUpdate&&&&&&&&'); }, updated: function() { console.log('$$$$$$$this is children2 updated$$$$$$$$'); }, methods: { changeChildren2Data: function() { this.children2Data = 'changeChildren2Data' }, emitParentToChangeChildren2Props: function() { this.$emit('changeParentToChildren2Props'); } } } </script>
- 父组件改变props,子组件如果直接使用props,会触发子组件更新
- 父组件改变props,子组件如果将props放进data中再使用,不会触发子组件更新
- 父组件改变props,子组件如果将props放进computed中再使用,会触发子组件更新
- data,props和computed的变化都会触发组件更新
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue路由只变化参数页面组件不更新问题
- vue的props实现父组件变化子组件一起变化
- vue的props实现子组件随父组件一起变化
- Vue.js中data,props和computed数据
- 小白使用React---子组件的状态变化更新到父组件中
- VUE ---(9)组件——props数据传递
- vue 组件 props 和event
- vue 组件 之 注册 及 组件内data的使用
- Vue组件中的data必须是一个function的原因浅析
- vue.js使用props在父子组件之间传参
- vue组件中data必须要写成函数的原因
- vue 组件样式如何不影响全局
- Vue.js的小片段——Vue中一个组件的v-for(props,is="todo-item")
- vue数组中数据变化但是视图没有更新解决方案
- Vue 父子组件的数据传递、修改和更新
- 浅谈Vue父子组件和非父子组件传值问题
- Vue 使用Props属性实现父子组件的动态传值
- Vue 父子组件的数据传递、修改和更新方法
- 数据库组件 Hxj.Data (五)(更新操作篇)
- Vue.js学习(二):computed响应数据变化与其他几种方法的比较