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 ...
随机推荐
- Java 【循环语句】
一.java循环语句分支 二.for循环 在java中for循环和C的循环用法一样 public class demo{ public static void main(String[] args){ ...
- Pikachu-Unsafe Fileupload（不安全的文件上传）
不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像.上传附件等等.当用户点击上传按钮后,后台会对上传的文件进行判断 比如是否是指定的类型.后缀名.大小等等 ...
- 请求筛选模块被配置为拒绝包含双重转义序列的请求（.net core程序的‘web.config’调整）
之前项目有一个静态文件特殊字符转义的报错(+变为 %2B),老是显示404 请求筛选模块被配置为拒绝包含双重转义序列的请求 .网上的大多数解决方案都是一下: https://www.cnblogs ...
- mui退出登录
html部分: <button id='promptBtn' type="button" class="mui-btn mui-btn-block mui-btn- ...
- linux安装docker和docker compose
运行 sudo -s 切换到root用户. 1.卸载旧版本Docker(如果系统之前没安装过Docker,可以跳过): yum remove docker \ docker-client \ dock ...
- CF575A Fibonotci [线段树+矩阵快速幂]
题意 \(s\{\}\) 是一个循环数列 循环节为 \(n\),你可以改掉 \(m\) 项,这 \(m\) 项独立,且不影响循环节 考虑线段树维护矩阵,单点修改最多m次,每次矩阵快速幂就完事了 // ...
- PAT 基础编程题目集 6-7 统计某类完全平方数 (20 分)
本题要求实现一个函数,判断任一给定整数N是否满足条件:它是完全平方数,又至少有两位数字相同,如144.676等. 函数接口定义: int IsTheNumber ( const int N ); 其中 ...
- 0级搭建类010-Oracle Linux 6.x安装(OEL 6.10) 公开
项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...
- java - GC垃圾收集器详解（三）
以前收集器的特点 年轻代和老年代是各自独立且连续的内存块 年轻代收集必须使用单个eden+S0+S1进行复制算法 老年代收集扫描整个老年代区域 都是以尽可能少而快速地执行GC为设计原则 G1是什么 G ...
- Educational Codeforces Round 81 (Rated for Div. 2) 题解
过了n天补的题解:D AB就不用说了 C. Obtain The String 思路挺简单的,就是贪心,但是直接贪心的复杂度是O(|s|*|t|),会超时,所以需要用到序列自动机 虽然名字很高端但是就 ...