zoukankan      html  css  js  c++  java
  • uniapp

    .sync修饰字在vue1.0作为双向数据绑定而存在,在2.0时被砍掉。而后在2.3被当做语法糖加入 (vue单向绑定数据流通)

     

    假设一个需求是:父组件值传入到子组件,然后子组件更改后父组件的值也得更改

     

    1. 通过props传值,data赋值的操作实现(避免出现双向数据绑定错误)

    index.vue

    <template>
    	<view class="content">
    		<onA :number.sync="num"></onA>
    		父组件:{{num}}
    	</view>
    </template>
    
    <script>
    	import onA from '@/components/onA.vue';
    	export default {
    		data() {
    			return {
    				num: 10
    			}
    		},
    		components: {
    			onA
    		},
    		onLoad() {},
    		mounted() {
    
    		},
    		methods: {
    		}
    	}
    </script>
    
    <style>
    	.title {
    		color: #007AFF;
    	}
    </style>

     

    onA.vue

    <template>
    	<view @click="fn">
    		子组件:
    		{{numberCache}}
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				numberCache: null
    			}
    		},
    		props: ['number'],
    		created() {
    			this.numberCache = this.number;
    		},
    		methods: {
    			fn() {
    				// 这里处理它就好
    				this.numberCache++;
    				this.$emit('update:number', this.numberCache);
    			}
    		},
    		mounted() {
    
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.title {
    		color: #F0AD4E;
    	}
    </style>
    

      

    我们也可以利用子组件this.$emit传值再赋值的形式去更新父组件的值.

    2. 如果不想引起双向数据绑定报错可以通过ref标识向子组件赋值


    index.vue(父组件)

    <template>
    	<view class="content">
    		<onA :number.sync="num" ref="on"></onA>
    		父组件:{{num}}
    	</view>
    </template>
    
    <script>
    	import onA from '@/components/onA.vue';
    	export default {
    		data() {
    			return {
    				num: 10
    			}
    		},
    		components: {
    			onA
    		},
    		onLoad() {},
    		mounted() {
    			this.$refs.on._data.number = this.num;
    		},
    		methods: {}
    	}
    </script>
    
    <style>
    	.title {
    		color: #007AFF;
    	}
    </style>
    

    onA.vue

    <template>
    	<view @click="fn">
    		子组件:
    		{{number}}
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				number: null
    			}
    		},
    		methods: {
    			fn() {
    				this.number++;
    				this.$emit('update:number', this.number);
    			}
    		},
    		mounted() {
    
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.title {
    		color: #F0AD4E;
    	}
    </style>
    

      

  • 相关阅读:
    四则运算出题系统,java
    Javaweb测试
    《构建之法》 读书笔记(6)
    使用ProcDump在程序没有响应时自动收集dump
    NASA关于如何写出安全代码的10条军规
    C#和C++中的float类型
    避免在C#中使用析构函数Finalizer
    C#性能优化的一些技巧
    从bug中学习怎么写代码
    Code Smell那么多,应该先改哪一个?
  • 原文地址:https://www.cnblogs.com/cisum/p/12196878.html
Copyright © 2011-2022 走看看