1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7. <body>
  8.  
  9. <div id="app">
  10.     <input type="text" v-model="msg">
  11.     <!-- :cmovies="movies"：父传子之传值 -->
  12.     <!-- @item-click="itemClick"：接收子组件通过自定义事件传过来的值（子传父亲） -->
  13.     <!-- ref="c" 组件标识，利于得到该子组件实例对象 -->
  14.     <cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn>
  15. </div>
  16.  
  17. <!-- 子组件模板 -->
  18. <template id="cpn">
  19.     <div>
  20.         <h1>从父组件传过来的值:</h1>
  21.  
  22.         <ul>
  23.             <li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li>
  24.         </ul>
  25.     </div>
  26. </template>
  27. <script>
  28.     // 子组件
  29.     const cpn = {
  30.         // 引用模板
  31.         template : "#cpn",
  32.         // props 父传子之接收
  33.         // props: ["cmovies"],
  34.         props : {
  35.             cmovies :{
  36.                 // 限定类型
  37.                 type:Array,
  38.                 // 默认值(父组件未传值)
  39.                 default(){
  40.                     // 这里为什么要用工厂函数？思考下，当限定类型为Object或Array时会报错
  41.                     return ['不能说的秘密','头文字D'];
  42.                 },
  43.             }
  44.         },
  45.         data(){
  46.             // 又是工厂函数，为什么和vue实例data的定义有别?多个vue组件，如果不用工厂函数的话，各个vue实例对象的属性会引用混乱
  47.             return {
  48.                 // 将父组件传过来的值放到data里面，变成自己的属性（拓展性，不然不允许修改）
  49.                 xmovie : this.cmovies
  50.             };
  51.         },
  52.         methods: {
  53.             clickmovie (item){
  54.                 console.log("子组件点击",item)
  55.                 // 将点击事件转成自定义事件传给父组件
  56.                 // emit:发射
  57.                 console.log("值通过自定义事件发射至父组件")
  58.                 this.$emit('item-click',item);
  59.             }
  60.         },
  61.         mounted(){
  62.             console.log("cpn子组件挂载完毕，根组件root对象：",this.$root)
  63.         }
  64.  
  65.     }
  66.     // 父组件，在这里父组件是vue实例
  67.     const app2 = new Vue({
  68.         el: "#app",
  69.         data: {
  70.             // 准备传给子组件的值
  71.             movies: ['海王','海贼王'],
  72.             msg:"watch实时监测",
  73.         },
  74.         /*注册组件*/
  75.         components:{
  76.             cpn,
  77.         },
  78.         methods:{
  79.             itemClick(item){
  80.                 console.log("父组件接收",item);
  81.             }
  82.         },
  83.         //  watch:实时监测属性值的改变
  84.         watch:{
  85.             msg(newVal,oldVal){
  86.                 console.log("watch实时监测更新数据，新数据：",newVal)
  87.             }
  88.         },
  89.         mounted  (){
  90.             // this.$refs 所以的子组件
  91.             // this.$refs.c 子组件中 设置了ref属性值为c的内个组件
  92.             console.log("vue实例挂载完毕，有一个子组件，实例对象为：",this.$refs.c)
  93.         }
  94.     })
  95.  
  96. </script>
  97. </body>
  98. </html>

vue全局组件与局部组件的更多相关文章

  1. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  2. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  3. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  4. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  5. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  6. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  8. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

  9. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  10. Vue组件之全局组件与局部组件

    1全局注册实例 <div id="app"> <com-btn></com-btn> <com-btn></com-btn&g ...

随机推荐

  1. ES的性能优化

    ES的性能优化 es在数据量很大的情况下(数十亿级别)如何提高查询效率? 在es里,不要期待着随手调一个参数,就可以万能的应对所有的性能慢的场景.也许有的场景是你换个参数,或者调整一下语法,就可以搞定 ...

  2. pandas模块的数据操作

    数据操作 数据操作最重要的一步也是第一步就是收集数据,而收集数据的方式有很多种,第一种就是我们已经将数据下载到了本地,在本地通过文件进行访问,第二种就是需要到网站的API处获取数据或者网页上爬取数据, ...

  3. SpringBoot整合持久层技术--（二）MyBatis

    简介: 原名iBatis,SpringBoot中使用MyBatis: pom.xml <dependency> <groupId>org.springframework.boo ...

  4. java中equals与==号的区别

    1.==号对于基本数据类型来说,比较的是值,对于引用数据类型来说比较的是地址值 2.equals方法在object类中,比较的是地址值,但是String类重写了Object类中的equals方法,所以 ...

  5. BIOS和DOS中断大全

    DOS中断: 1.字符功能调用类(Character-Oriented Function)01H.07H和08H —从标准输入设备输入字符02H —字符输出03H —辅助设备的输入04H —辅助设备的 ...

  6. JAVA中定义不同进制整数

    1.八进制整数以0开头 int b = 033;//表示十进制数27,3 × 81 + 3 × 80 = 3 × 8 + 3 × 1 = 24 + 3 = 27 2.十六进制整数以0x或者0X开头 i ...

  7. 关于Comparable和Comparator那些事

    在实际项目开发过程中,我们经常需要对某个对象或者某个集合中的元素进行排序,常用的两种方式是实现某个接口.常见的可以实现比较功能的接口有Comparable接口和 Comparator接口,那么这两个又 ...

  8. String类型的日期怎么转化为Date类型

    在一个SQL中,如果同时使用rownum和order by,会有一个先后顺序的问题. 比如select id1,id2 from t_tablename where rownum<3 order ...

  9. http断点续传Range与Content-Range

    今天用别人封装的libcurl库下载文件,发现下载下来的文件总是缺少头两个字节,用以下配置启用HTTP头信息打印后发现原来是设置了断点续传位置的原因 curl_easy_setopt(m_pCurl, ...

  10. Winform递归绑定树节点

    /// <summary> /// 绑定树节点 /// </summary> /// <param name="pid"></param& ...