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 ...
随机推荐
- kafka消费服务调优
1.消费服务速度跟不上 2.top -H 观察是哪个线程最忙 3.多次使用jstack,看看最忙的那个线程在做什么
- STL-list 链表
#include <iostream> #include <list> using namespace std; int main() { // list可以在头部和尾部插入和 ...
- Callablestatement与JavaBean及其实例
一. Callablestatement:调用 数据库中的存储过程.存储函数 connection.prepareCall(参数:存储过程/存储函数名)参数格式:存储过程:(无返回值return,用O ...
- Spark学习之路 （五）Spark伪分布式安装[转]
JDK的安装 JDK使用root用户安装 上传安装包并解压 [root@hadoop1 soft]# tar -zxvf jdk-8u73-linux-x64.tar.gz -C /usr/local ...
- 【剑指Offer】24、二叉树中和为某一值的路径
题目描述 输入一颗二叉树的根节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大 ...
- ADO.NET中的数据库帮助类
ADO.NET是.net framework中的一个重要模块,用于程序和数据源的连接,它的类都位于 System.Data.dll 中. 用于SQLServer的命名空间:System.Data.Sq ...
- 论文阅读笔记（十）【CVPR2016】：Recurrent Convolutional Network for Video-based Person Re-Identification
Introduction 该文章首次采用深度学习方法来解决基于视频的行人重识别,创新点:提出了一个新的循环神经网络架构(recurrent DNN architecture),通过使用Siamese网 ...
- ubuntu18.04图形模式切换到命令模式
命令模式 :Ctrl+Alt+F5 图形模式:Ctrl+Alt+F1
- chm文件打开空白无内容
问题描述 chm文件打开空白无内容 解决方案 选中 chm 文件,右键 - 属性- 在弹出的对话框中点击右下方的“接触锁定”,之后点击“应用”,再点击“确定”
- poj1000-1009小结
poj1000-1009小结 poj1000-1009小结 poj1000 AB poj1001 Exponentiation poj1002 poj1003 poj1004 Financial Ma ...