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 ...
随机推荐
- 我用 Python 集齐了五福
[新智元导读]又到了每年集五福的时间.你的五福集齐了吗?每天在各种群里苦苦求扫福,或者忍受着别人天天求扫福,是不是有点厌倦了.作为技术人员,怎么能忍受得了这种低效的全人工操作呢?今天就为大家推荐用 ...
- c++编程之内存模型
我们在编程的时候,无可避免要申明变量,在这个变量可以是在()中,可以在{}中,也可以直接在外面,也可以用new的方式.那么当我们在申明变量的时候,实质上我们所做的工作是:关联了一个内存模型! 上代码: ...
- Spark学习之路 （十八）SparkSQL简单使用[转]
SparkSQL的进化之路 1.0以前: Shark 1.1.x开始: SparkSQL(只是测试性的) SQL 1.3.x: SparkSQL(正式版本)+Dataframe 1.5.x: Spar ...
- drf 接口文档
coreapi 参考点击 swagger风格接口文档 参考 参考用例 swagger 使用参考
- Java第三节课总结
动手动脑1: package ketangceshia;import java.util.Random;public class fuben { public static void main( ...
- IDEA如何快速搭建Java开发环境
作为IntelliJ IDEA mac新手,IDEA如何快速搭建Java开发环境呢?今天小编就给大家带来了IntelliJ IDEA mac使用教程,想知道IDEA如何快速搭建Java开发环境? 全局 ...
- 03-SV过程语句和子程序
1.过程语句 for语句.do-while语句.while语句 initial begin string cmd; int file,c; $display("=========== con ...
- Mysql常见注入
Mysql显错注入 1.判断注入类型为字符型:http://219.153.49.228:43074/new_list.php?id=tingjigonggao' and 1=1 --+2.判断字段为 ...
- unity踩坑2020-01-21
这几天一直在测试一个类似于传奇的2d界面游戏,目前做的测试为: 人物动作响应,主要是8方向的判断和资源文件精灵的刷新. 学到的知识点: 1,Enum.GetHashCode() 可以得到这个枚举的索引 ...
- 松软科技课堂:jQuery 效果 - 淡入淡出
jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...