vue全局组件与局部组件
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body> <div id="app">
<input type="text" v-model="msg">
<!-- :cmovies="movies"：父传子之传值 -->
<!-- @item-click="itemClick"：接收子组件通过自定义事件传过来的值（子传父亲） -->
<!-- ref="c" 组件标识，利于得到该子组件实例对象 -->
<cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn>
</div> <!-- 子组件模板 -->
<template id="cpn">
<div>
<h1>从父组件传过来的值:</h1> <ul>
<li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li>
</ul>
</div>
</template>
<script>
// 子组件
const cpn = {
// 引用模板
template : "#cpn",
// props 父传子之接收
// props: ["cmovies"],
props : {
cmovies :{
// 限定类型
type:Array,
// 默认值(父组件未传值)
default(){
// 这里为什么要用工厂函数？思考下，当限定类型为Object或Array时会报错
return ['不能说的秘密','头文字D'];
},
}
},
data(){
// 又是工厂函数，为什么和vue实例data的定义有别?多个vue组件，如果不用工厂函数的话，各个vue实例对象的属性会引用混乱
return {
// 将父组件传过来的值放到data里面，变成自己的属性（拓展性，不然不允许修改）
xmovie : this.cmovies
};
},
methods: {
clickmovie (item){
console.log("子组件点击",item)
// 将点击事件转成自定义事件传给父组件
// emit:发射
console.log("值通过自定义事件发射至父组件")
this.$emit('item-click',item);
}
},
mounted(){
console.log("cpn子组件挂载完毕，根组件root对象：",this.$root)
} }
// 父组件，在这里父组件是vue实例
const app2 = new Vue({
el: "#app",
data: {
// 准备传给子组件的值
movies: ['海王','海贼王'],
msg:"watch实时监测",
},
/*注册组件*/
components:{
cpn,
},
methods:{
itemClick(item){
console.log("父组件接收",item);
}
},
// watch:实时监测属性值的改变
watch:{
msg(newVal,oldVal){
console.log("watch实时监测更新数据，新数据：",newVal)
}
},
mounted (){
// this.$refs 所以的子组件
// this.$refs.c 子组件中 设置了ref属性值为c的内个组件
console.log("vue实例挂载完毕，有一个子组件，实例对象为：",this.$refs.c)
}
}) </script>
</body>
</html>
vue全局组件与局部组件的更多相关文章
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- Vue组件之全局组件与局部组件
1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...
随机推荐
- 通过sd文件发布的FeatureAccess服务不能查看到图层
发布服务有两种方法, 1. 用ArcMap --Share As - service --publish a service 此方法可以直接将地图数据发布到ArcGIS Server 的地图服务中, ...
- 监听Ueditor的 iframe中的按键，按键组合事件（Ctrl+s）
个人博客 地址:https://www.wenhaofan.com/a/20190716214214 监听按键事件 ueditor.ready(function() { UE.dom.domU ...
- Mybatis和Hibernate面试问题及答案
1.@Qualifier 注解 答:当有多个相同类型的bean却只有一个需要自动装配时,将@Qualifier 注解和@Autowire 注解结合使用以消除这种混淆,指定需要装配的确切的bean. ...
- zipfile-压缩解压
zipfile 压缩解压 import os import zipfile # 导入模块 # BASE_STATIC_CASE_RESULT:我Django static下面的某个路径 BASE = ...
- BugkuCTF flag.php(反序列化)
进去后是个登录页面,但是login根本不会跳转,看源码也没提示,但是这道题给了一个提示:hint,那么盲猜应该是一个get参数,因为post不能跳转,那么get总有内容吧,跟上hint参数,随便赋一个 ...
- musql 单表查询
一 介绍 本节内容: 查询语法 关键字的执行优先级 简单查询 单条件查询:WHERE 分组查询:GROUP BY HAVING 查询排序:ORDER BY 限制查询的记录数:LIMIT 使用聚合函数查 ...
- SpringBoot整合WEB开发--（八）启动任务系统
简介: 有一些特殊的任务需要在系统启动时执行,例如配置文件的加载,数据库初始化等操作,如果没有使用SpringBoot,这些问题可以在Listener中解决.SpringBoot提供了两种解决方案:C ...
- linux--后端项目部署
nginx + uwsgi + crm + mysql + virtualenv + supervisor项目部署 1.后端整起,用uwsgi启动crm 2.创建一个新的虚拟环境,用于运行crm新业务 ...
- Yaf自定义autoload以实现Model文件和Controller文件命名区分
先上图: 由于Yaf作者在设计Yaf框架目录时没有直接区分开models文件和controllers文件,所以在IDE看着会很难受,眼睛离开了编辑器就不大好区分这两个文件夹的文件.所以自己写了一个au ...
- yii2表单提交CSRF验证
Yii2表单提交默认需要验证CSRF,如果CSRF验证不通过,则表单提交失败,解决方法如下: 第一种解决办法是关闭Csrf public $enableCsrfValidation = false; ...