Subprograma uniapp WeChat: problema de enlace bidireccional del modelo v (el nombre de los accesorios personalizados no es válido)

prefacio

La rutina básica de pasar datos entre componentes padre e hijo en VUE:

1. de padre a hijoprops
2. padre del niñothis.$emit('事件名', '数据');
3. Utilice syncel modificador para implementar soporte para datos síncronos

pregunta

Debido a que uniapp se utiliza para desarrollar subprogramas, se deben considerar los problemas de compatibilidad y no se trate como un VUE2 serio.
Aunque el subprograma admite v-modelel comando, no admite modella opción. Entonces, declare los accesorios
predeterminados en el subcomponente para recibir el valor. ya sea manualmente: enlazar yvalue
属性事件

Ejemplo de enlace bidireccional

usar modelo v

Dado que el subprograma no admite modella opción.
En esta solución: solo se pueden usar datos de recepción en los subcomponentes valuey activarlos cuando se actualizan input.

• componente principal

<template>
	<view>
		<view><text>父组件：{
   
   { msg }}</text></view>
		<vmodel-component v-model="msg"></vmodel-component>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
       msg: '大家好，我是：使用 v-model' }
		},
		methods: {
      
      }
	}
</script>

<style>
</style>

• Subconjunto

<template>
	<view> 
		<view> 子组件：{
   
   {value}}  </view>
		<button @click="onclick" >更新</button>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      return {
      
      };},
		props:{
      
      
			value:{
      
       type: String, default: "未收到父值" }
		},
		methods:{
      
      
			onclick(e){
      
      
				this.$emit('input', '我是笨笨'); // v-mode 
			}
		}
	}
</script>

<style>
</style>

Utilice v-bind + v-on

Por supuesto, generalmente se usa la forma abreviada:
v-bind:abreviado tan :
v-on:abreviado como@

Como está atado con sus propias manos, puede configurarlo propsusted mismo. Por ejemplo, en los subcomponentes, suelo recibir datos. El evento que yo mismo nombré .事件名
msg
customEvent

<template>
	<view>
		<view><text>父组件：{
   
   { msg }}</text></view>
		<novmodel-component :msg="msg" @customEvent="e => msg = e"></novmodel-component>
		<!-- <novmodel-component :msg="msg" @input=" msg = $event "></novmodel-component> -->
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
       msg: '大家好，我是：不使用 v-model' }
		},
		methods: {
      
      }
	}
</script>

<style>
</style>

• Subconjunto

<template>
	<view> 
		<view> 子组件：{
   
   {msg}}  </view>
		<button @click="this.$emit('customEvent', '我是笨笨')" >更新</button>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      return {
      
      };},
		props:{
      
      
			msg:{
      
       type: String, default: "未收到父值" }
		},
		methods:{
      
      }
	}
</script>

<style>
</style>

Utilice el modificador de sincronización

Al utilizar la sincronización, puede decidir a cuál de los subcomponentes vincularse props, por ejemplo, está vinculado msga .
Se activa cuando se sincronizan los datos.update:要更新的props

• componente principal

<template>
	<view>
		<view><text>父组件：{
   
   { msg }}</text></view>
		<sync-component :msg.sync="msg"></sync-component>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
       msg: '大家好，我是：使用 sync 修饰符，实现同步数据' }
		},
		methods: {
      
      }
	}
</script>

<style>
</style>

• Subconjunto

<template>
	<view> 
		<view> 子组件：{
   
   {msg}}  </view>
		<button @click="$emit('update:msg', '我是笨笨')" >更新</button>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      return {
      
      };},
		props: {
      
      
			msg: {
      
       type: String, default: "未收到父值" }
		},
		methods:{
      
      }
	}
</script>

<style>
</style>

Referencias

Documentación oficial de uniapp: directiva de plantilla v-model
Documentación oficial de uniapp: modificador .sync

Documentación oficial de Vue2: modelo de opción