组件视图

时间：2023-03-31 19:24:17 vue.js

VUE组件全局组件注意事项组件中的数据必须是一个函数，这样各个组件的数据才能独立。该模板必须具有明确的根元素。简单的说，最外层一定是标签。也可以使用ES6模板语法，可以用破折号或者驼峰命名（驼峰命名，在组件的模板中可以直接使用，但是必须在vue的html代码中使用）//注册组件//Vue.component('BtnCounter',function(){Vue.component('btn-counter',function(){//组件中的数据必须是函数data:function(){return{count:0}},//模板必须有一个明确的根元素，简单的说，最外层必须是一个标签//template:'{{count}}clicked',template:'{{count}}clicked',methods:{handle:function(){this.count++;}}});//组件使用

本地组件local该组件只能在注册它的父组件中使用1constHelloWorld=Vue.extend({template:'

',data:function(){return{msg:'helloworld'}}})varvm=newVue({el:'#app',data:{},组件:{'hello-world':你好世界}}）;

方法二（这是方法一的简写版，好像没有调用extend，其实vue在底部为你调用）varHelloWorld={data:function(){return{msg:'helloworld'}}template:'

'}varvm=newVue({el:'#app',数据:{},组件:{'hello-world':HelloWorld}});

单文件组件//子组件//父组件父子组件使用props从parent传值给child，见props介绍childtoparent1.函数形式//childcomponent//parent组件自定义事件表单//子组件//父组件refgetdata//子组件同第二种方式//父组件<脚本>从'./Student.vue'导入学生导出默认{名称：'HelloWorld'，数据（）{返回{}}，组件：{学生}，安装（）{this.getChildInfoOfRef（）}，方法：{getChildInfoOfRef(){console.log("Thisisreftogetdata",this.$refs.student.childName)this.$refs.student.$on('getchildrenInfo',this.getchildrenInfo)},getchildrenInfo(val)复制代码{console.log("这是子组件给我的数据",val)}}}

组件视图

{{msg}}

{{msg}}