侦听器
Vue侦听器是提供给开发者可以用来监测某些数据的变化,从而针对这些数据的变化进行某些操作。但是要注意:侦听器本质上是一个函数,如果要监听哪一个数据的变化,就把那个数据作为函数名
基本示例
计算属性允许我们声明性地计算衍生值。然而在有些情况下,我们需要在状态变化时执行一些“副作用”:例如更改 DOM,或是根据异步操作的结果去修改另一处的状态。
在组合式 API 中,我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数:
<script setup> import { ref, watch } from 'vue' const question = ref('') const answer = ref('Questions usually contain a question mark. ;-)') // 可以直接侦听一个 ref watch(question, async (newQuestion, oldQuestion) => { if (newQuestion.indexOf('?') > -1) { answer.value = 'Thinking...' try { const res = await fetch('https://yesno.wtf/api') answer.value = (await res.json()).answer } catch (error) { answer.value = 'Error! Could not reach the API. ' + error } } }) </script> <template> <p> Ask a yes/no question: <input v-model="question" /> </p> <p>{{ answer }}</p> </template>
模板引用
在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的
ref
attribute: 就是使用ref $refs响应式
<script> export default { data(){ return{ content:"内容" } }, methods:{ getElementHanldle(){ this.$refs.container.innerHTML = "vvvvvvv" console.log(this.$refs.username.value) } } } </script> <template> <div ref="container" class="container">{{content}}</div> <input type="text" ref ="username"> <button @click="getElementHanldle">获取元素</button> </template>
组合式
<script setup> import {ref,onMounted} from 'vue' //相当于document.getElementById(id),直接控制DOM元素 //onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码: const name = ref(null) const pp = ref(null) onMounted(()=>{ name.value.value = '李四' pp.value.innerHTML = 'abc' }) </script> <template> <label><input type="text" ref="name"></label> <p ref="pp"></p> </template>
组件
组件注册
针对vue3 写法@/ 不用@我的跑不通
局部注册
<script setup > /*import Header from "@/pages/Header.vue";*/ import Main from "@/pages/Main.vue"; </script> <template> <Header/> <Header/> <Main/> </template>
如果没有使用
<script setup>
,则需要使用components
选项来显式注册:<script > /*import Header from "@/pages/Header.vue";*/import Main from "@/pages/Main.vue"; export default { components: { Main }, setup() { // ... } } </script> <template> <Header/> <Header/> <Main/> </template>
全局注册
在main.js文件
import App from './App.vue' // import Header from "@/pages/Header.vue"; import Header from "@/pages/Header.vue"; import Main from "@/pages/Main.vue"; const app = createApp(App) app.component('Header',Header) app.component('Main',Main) app.mount('#app');
<script setup > /*import Header from "@/pages/Header.vue";*/ /*import Main from "@/pages/Main.vue";*/ </script> <template> <Header/> <Main/> </template>
组件之间数据传递
父传子:props 可以传递任何类型
parent 选项式
<script > import childer from "@/components/childer.vue"; export default { data(){ return{ message:"laozi", age:20, names:["name","zack","louie"], userinfo:{ name:"wosinibaba", age:20 } } }, components:{ childer } } </script> <template> <h3>Parent</h3> <childer :title="message" :userinfo="userinfo" :names="names" deom="niupi" :age="age"/> </template> <style scoped> </style>
child
<script > export default { data(){ return{ } },props:["title","deom","age","names","userinfo"] } </script> <template> <h3>chiler</h3> <p>{{title}}</p> <p>{{deom }}</p> <p>{{age }}</p> <ul> <li v-for="(item,index) of names" :key="index">{{item}}</li> </ul> <p>{{userinfo}}</p> </template> <style scoped> </style>
子传父:自定义事件(this$emit)
父
<script > import componetnB from "./componetnB.vue"; export default { components:{ componetnB }, methods: { getHandle(data) { this.message = data ; console.log("触发了"); } }, data(){ return{ message:"" } } } </script> <template> <hr> <h3>父亲: {{message}}</h3> <h3>组件事件</h3> <componetnB @someEvent="getHandle" /> </template>
子
<script > export default { methods: { clickeventHandle() { // this.$emit("someEvent",this.msg) } }, data(){ return{ msg:"chiled1shuji" } } } </script> <template> <hr> <h3>child</h3> <button @click="clickeventHandle">传递数据</button> </template>