vue日常学习

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.$refs可以用来进行父子级间通信。ref被用于作为子组件的索引ID，用以方便的在js中直接访问子组件。用法如下parent.$refs.idname

使用方法：

在父级元素上加上ref属性

<button @click='change'>点击</button>
<app-test ref='child'></app-test>

methods:{
    change:function(){
      this.$refs.child.changehandle('父级传到子级')
    }
  }

　　子组件部分：

<template>
	<div>
		<input type="text" v-model='test'  @change="changehandle(test)">
	</div>
</template>

methods:{
			changehandle:function(test){
				console.log(test)
				this.$emit('input',test)
			}
		}

　　这样可以输出父级传入的内容，输出为‘父级传到子级’

2.双向数据绑定

使用v-model来进行双向数据绑定，但是实际上这只是一个语法糖，本质是事件监听。

<input v-model="something">

<input v-bind:value="something" v-on:input="something = $event.target.value">

prop动态绑定value值

让组件的 v-model 生效，它必须：

  • 接受一个 value 属性

  • 在有新的 value 时触发 input 事件

(1).在自定义组件上添加v-model

<app-test v-model='par_test'></app-test>
           <p>{{par_test}}</p>

(2).组件模板使用v-model进行双向数据绑定，然后$emit事件到外部，从而实现双向绑定。

<template>
	<div>
		<input type="text" v-model='test' @change="changehandle(test)">
	</div>
</template>
<script>
	export default{
		data() {
			return{
				test:'sc'
			}
		},
　　　　　　　　　props:['value'],//接受value属性
		methods:{
			changehandle:function(test){
				console.log(test)
				this.$emit('input',test)//触发事件
			}
		}
　　　　　　　　　
	}
</script>

以上是 vue日常学习 的全部内容， 来源链接： utcz.com/z/380517.html

回到顶部