网页报价_长沙建设公司网站_谷歌怎么投放广告_推广运营是做什么的

在学习Vue.js 过程中发现有的例子不全面，记录下这些方便大家参考：

教程 | Vue.js (vuejs.org)

在Vue.js教程中介绍Emit的时候，仅初始化生效，这就导致Parent Component只可以在初始化时使用回调函数才可以获取到Child Component发送的消息。源代码如下：

<!--ChildComp.vue-->
<script setup>
const emit = defineEmits(['response'])emit('response', 'hello from child')
</script><template><h2>Child component</h2>
</template><!--App.vue, 即Parent-->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'const childMsg = ref('No child msg yet')
</script><template><ChildComp @response="(msg) => childMsg = msg" /><p>{{ childMsg }}</p>
</template>

优化后如下：Parent组件可以接收子组件输入框的内容

<!--ChildComp.vue--><script setup>
import{ref} from 'vue'
const emit = defineEmits(['response'])const msg=ref('')
function sendMsg()
{emit('response',msg.value)
}
//emit('response',msg.value)//这个是原来的，只可以在加载的时候调用一次，导致@response只可以显示的用"(msg)=>{childMsg=msg;}"， 而不可以调用function receiveMsg(msg)。
</script><template><h2>Child component</h2><input v-model="msg" placeholder="send message to parent" /><button @click="sendMsg">Send Msg</button>
</template><!--App.vue, 即Parent-->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'const childMsg = ref('No child msg yet')
//此处是通过增加一个function发送
function receiveMsg(msg)
{childMsg.value=msg;
}</script><template><ChildComp @response="receiveMsg"  /><p>Message from Child: {{ childMsg }}</p>
</template>