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>
    

      

  • 相关阅读:
    eclipse编码格式设置教程、如何为eclipse设置编码格式?
    Eclipse中使用SVN
    个人mysql配置命令
    MySQL新建用户,授权,删除用户,修改密码等命令
    MySQL修改root密码的多种方法
    MySQL 5.6 for Windows 解压缩版配置安装
    在windows下安装mysql5.6.24版本
    CS231n assignment2 Q3 Dropout
    CS231n assignment2 Q1 Fully-connected Neural Network
    CS231n assignment2 Q2 Batch Normalization
  • 原文地址:https://www.cnblogs.com/cisum/p/12196878.html
Copyright © 2011-2022 走看看