可以复用的页面的一部分学习的前提是导入文件
链接:https://pan.baidu.com/s/1nJyLYYKt4c4QLfeuQrUGOg 提取码:1115
先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册
- 使用 Vue 应用实例的
app.component()方法,让组件在当前 Vue 应用中全局可用- 定义一个
全局组件,组件必须提供模板(component),提供组件的内容

template的优先级比mount挂载元素高
模板内容 注册组件 console.log(Vue);


独立数据对象,在其中一个实例上数据改变了,其他实例数据不收影响
官网:https://www.bootcss.com/

- 父组件是通过
自定义属性把值传给子组件- 传值的时候, 如果
不绑定传过去的都是字符串,绑定了可以识别各种类型和变量- 子组件通过
props属性进行接收- 父组件传给子组件的值
不能改
type:Number(类型)required:true(必须传递这个参数)default:100(默认值)validator(value){ return value>=0 && value<=750 }(自定义验证规则)
1.
监听
2.触发事件,发送数据
3.接收, 就是子组件传过来的值
let Txt = {template: ``,data() {return {str: ''}},methods: {send() {//把值发给父组件this.$emit("msg", this.str);//清空文本框this.str = ""}}}let List = {props: ["arr"],template: `- {{item}}
`}Vue.createApp({components: {Txt, List},data() {return {arr: ["aa", "bb", "cc"]}},methods: {add(e) { //e 就是子组件文本框的数据this.arr.push(e);}}}).mount("#box")
mitt实现兄弟组件传值- 官网:https://www.npmjs.com/package/mitt