成熟的网站怎么做seo推广,手机怎样创建网站,网站建设问题表,猫咪99永久找到回家的路目录
如何使用公共组件来编写页面 如何使用公共组件来编写页面
1.导入公共组件nav.vue
import Catenav from /components/nav.vue;
2.在页面插入子组件
如果使用了setup语法糖此时就可以直接在页面插入 Catenav /Catenav标签#xff0c;
…
目录
如何使用公共组件来编写页面 如何使用公共组件来编写页面
1.导入公共组件nav.vue
import Catenav from /components/nav.vue;
2.在页面插入子组件
如果使用了setup语法糖此时就可以直接在页面插入 Catenav /Catenav标签
反之则需要在页面写入 components函数
script
import Catenav from /components/nav.vue;
import { ref } from vue;
export default {components: {// cates_nav:CateNav,Catenav //注册的组件名称和组件实例名称保持一致时可以简写。},setup() {const count ref(0);const setcount () {count.value;};return {count,setcount};}
};
/script
3.父组件向子组件进行数据传递
在Catenav /Catenav标签内写入要从父页面传到子页面的数据此时默认传递的数据都是字符串类型的如果需要传递其他类型的数据数字、数组、对象等可以用v-bind进行数据绑定后再传递数据。 Catenavtitle一级分类namenav组件:age20:sextrue:arr[10, 20, 30]:mycountcount/Catenav
1数据传递-父传子不使用setup语法糖
在子组件中将父组件传过来的数据使用props进行接收 此时可以直接在页面使用{{}}来渲染数据如果需要在js部分使用父组件传过来的数据则需要在setup后面的括号内写入props再使用相关数据。
script
export default {setup(props) {console.log(props.name);},props: [title, name, age, sex, arr, mycount] //子组件配置props属性这个属性的只可以是数组也可以是对象。它里面用来声明父组件需要传递数据的属性。// 子组件不允许修改父组件传过来的数据
};
/script
2数据传递-父传子使用setup语法糖 使用setup语法糖是需要使用defineProps方法来接收父组件传递过来的数据。defineProps方法的参数是一个数组我们将需要接收的数据以数组元素的形式编写即可此时就可以在页面直接使用{{}}来渲染数据。如果需要在js部分使用父组件传递过来的数据则需要用到defineProps方法的返回值定义一个变量接一下defineProps的返回值然后通过打点的方法来使用父组件传过来的数据。
style scoped langless/style
!-- setup语法糖特有的语法defineProps()。其他地方无法使用 --
script setup
const props defineProps([title, name, age, sex, arr, mycount]);
const clickbtn () {console.log(props.title);
};
/script
4.子组件向父组件进行数据传递
子传父用到了自定义事件自定义事件就是我们自己通过v-on声明的事件之前我们用到的click事件是系统定义的系统事件由系统触发自定义事件由咱们触发。 p setkwgetkw/p!-- 给p标签自定义了一个事件事件名称是setkw --
1数据传递-子传父 不使用setup语法糖
给标签设置一个自定义事件然后将触发事件后触发的方法写到父组件中。
templatedivinput typetext v-modelsearch /!-- 父组件通过v-on自定义一个事件这个事件名称叫setkw。系统事件由系统触发自定义事件由咱们触发。这个自定义事件传给了子组件就由子组件触发seykw事件 --Search setkwgetkw/Search/div
/template
script setup
import { ref } from vue;
import Search from /components/Seach.vue;
const search ref();
console.log(search);
const getkw (kw) {console.log(执行自定义事件, kw);
};
/script
此时需要在子组件中接收我们自定义的事件为后面在子组件触发父组件中的自定义事件做准备。通过setup传参的方式将时间名拿到然后绑定按钮的点击事件此时点击事件会触发我们自定义的事件而我们自定义的事件又会自动执行对应的方法然后将我们需要传递的数据写在方法的参数部分即可完成数据传递。
setup的两个参数 参数一props可以拿到父传子的数据必写参数不使用也不可以省略参数二上下文对象context object可以通过.emit来触发事件
templatediv!--封装搜索组件 --input typetext v-modelkw /button clicksearch搜索/button/div
/template
script
import { ref } from vue;
export default {setup(props, cot) {const kw ref();const search () {//此时触发父组件绑定的自定义事件setkw间接调用getkw函数cot.emit(setkw, kw.value);};return {kw,search};}
};
/script
2 数据传递-子传父 使用setup语法糖
和不使用语法糖大致是一样的只不过此时需要使用defineEmits方法。
script setup
import { ref } from vue;
const emit defineEmits([setkw]);
const kw ref();
const search () {//此时触发父组件绑定的自定义事件setkw间接调用getkw函数emit(setkw, kw.value);
};
/script
