绑定事件

标签：vue const name 绑定 事件 组件 import ref

绑定事件（子组件向父组件传参）
方式一：School子组件通过props传递
方式二：Student子组件通过自定义事件传递
父组件代码

<script setup>
import Student from './components/Student.vue'
import School from './components/School.vue'

const getStudentName=(name)=>{
    console.log('App获取子组件姓名',name);

}
const getSchoolName=(name)=>{
    console.log('App获取子组件学校名',name);
}
</script>
<template>
    <div>
        <!-- 通过父组件给子组件传递函数类型的props：子给父传递参数 -->
        <Student @getStudentName="getStudentName"/>
        <hr>
        <School :getSchoolName="getSchoolName"/>

    </div>
</template>

Student子组件

<script setup>
import {ref,defineProps, toRefs,defineEmits} from 'vue'
const emits=defineEmits(['getStudentName'])
let msg=ref('欢迎来到三国')
let name=ref('刘备')
const MygetStudentName=(name)=>{
    emits('getStudentName',name)
}
</script>
<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学生姓名：{{name}}</h2>
        <button @click="MygetStudentName(name)">向父组件提供子组件姓名</button>
     
    </div>
</template>

School子组件

<script setup>
import {ref,defineProps, toRefs,defineEmits} from 'vue'
const props=defineProps({
    getSchoolName:Function
})
let msg=ref('欢迎来到学校')
let name=ref('清华大学')
const {getSchoolName}=toRefs(props)
</script>
<template>
    <div>
        <h1>{{msg}}</h1>
        <h2>学校姓名：{{name}}</h2>
        <button @click="getSchoolName(name)">向父组件提供子组件学校名</button>
     
    </div>
</template>

使用v-model传递
1.v-model无参数
父组件

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'
  
const message = ref('hello')
</script>

<template>
  <CustomInput v-model="message" /> {{ message }}
</template>

子组件

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

2.有参数的v-model
父组件

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
const title = ref('v-model argument example')
</script>

<template>
  <h1>{{ title }}</h1>
  <MyComponent v-model:title="title" />
</template>

子组件

<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

3.多个v-model绑定
父组件

<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'

const first = ref('John')
const last = ref('Doe')
</script>

<template>
  <h1>{{ first }} {{ last }}</h1>
  <UserName
    v-model:first-name="first"
    v-model:last-name="last"
  />
</template>

子组件

<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

4.给v-model增加修饰符
父组件

<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
const myText = ref('')
</script>

<template>
  This input capitalizes everything you enter:
  <MyComponent v-model.capitalize="myText" />
</template>

子组件

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: { default: () => ({}) }
})

const emit = defineEmits(['update:modelValue'])

function emitValue(e) {
  let value = e.target.value
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit('update:modelValue', value)
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

5.v-model既有参数又有修饰符

const props = defineProps(['title', 'titleModifiers'])
defineEmits(['update:title'])

console.log(props.titleModifiers) // { capitalize: true }

 

标签：vue,const,name,绑定,事件,组件,import,ref
From： https://www.cnblogs.com/shuchenhao/p/16962676.html