vue-父子组件和ref实例详解

父组件向子组件传值

<div id="app">
  <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
// 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123 啊-父组件中的数据'
   },
   methods: {},
   components: {
    // 结论:经过演示,发现,子组件中,默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
    com1: {
     data() { // 注意: 子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如: 子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上;
      // data 上的数据,都是可读可写的;
      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
     // 注意: 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的
     // props 中的数据,都是只读的,无法重新赋值
     props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据,只读,写的话会报警告
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '被修改了'
      }
     }
    }
   }
  });

父组件向子组件传方法

<div id="app">
  <!-- 父组件向子组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了 -->
  <com2 @func="show"></com2>
 </div>
 <template id="tmpl">
  <div>
   <h1>这是 子组件</h1>
   <input type="button" value="这是子组件中的按钮 - 点击它,触发 父组件传递过来的 func 方法" @click="myclick">
  </div>
 </template>
 // 定义了一个字面量类型的 组件模板对象
  var com2 = {
   template: '#tmpl', // 通过指定了一个 Id, 表示 说,要去加载 这个指定Id的 template 元素中的内容,当作 组件的HTML结构
   data() {
    return {
     sonmsg: { name: '小头儿子', age: 6 }
    }
   },
   methods: {
    myclick() {
     // 当点击子组件的按钮的时候,如何 拿到 父组件传递过来的 func 方法,并调用这个方法???
     // emit 英文原意: 是触发,调用、发射的意思
     // this.$emit('func123', 123, 456)
     this.$emit('func', this.sonmsg)
    }
   }
  }
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    datamsgFormSon: null
   },
   methods: {
    show(data) {
     // console.log('调用了父组件身上的 show 方法: --- ' + data)
     console.log(data);
     this.datamsgFormSon = data
    }
   },
   components: {
    com2
    // com2: com2
   }
  });

vue+本地存储实现评论功能

难道在于理解父组件向子组件传方法

<div id="app">
  <cmt-box @func="loadComments"></cmt-box>
  <ul class="list-group">
   <li class="list-group-item" v-for="item in list" :key="item.id">
    <span class="badge">评论人: {{ item.user }}</span>
    {{ item.content }}
   </li>
  </ul>
 </div>
 <template id="tmpl">
  <div>
   <div class="form-group">
    <label>评论人:</label>
    <input type="text" class="form-control" v-model="user">
   </div>
   <div class="form-group">
    <label>评论内容:</label>
    <textarea class="form-control" v-model="content"></textarea>
   </div>
   <div class="form-group">
    <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
   </div>
  </div>
 </template>
var commentBox = {
   data() {
    return {
     user: '',
     content: ''
    }
   },
   template: '#tmpl',
   methods: {
    postComment() { // 发表评论的方法
     // 分析:发表评论的业务逻辑
     // 1. 评论数据存到哪里去???  存放到了 localStorage 中 localStorage.setItem('cmts', '')
     // 2. 先组织出一个最新的评论数据对象
     // 3. 想办法,把 第二步中,得到的评论对象,保存到 localStorage 中:
     // 3.1 localStorage 只支持存放字符串数据, 要先调用 JSON.stringify
     // 3.2 在保存 最新的 评论数据之前,要先从 localStorage 获取到之前的评论数据(string), 转换为 一个 数组对象, 然后,把最新的评论, push 到这个数组
     // 3.3 如果获取到的 localStorage 中的 评论字符串,为空不存在, 则 可以 返回一个 '[]' 让 JSON.parse 去转换
     // 3.4 把 最新的 评论列表数组,再次调用 JSON.stringify 转为 数组字符串,然后调用 localStorage.setItem()
     var comment = { id: Date.now(), user: this.user, content: this.content }
     // 从 localStorage 中获取所有的评论
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     list.unshift(comment)
     // 重新保存最新的 评论数据
     localStorage.setItem('cmts', JSON.stringify(list))
     this.user = this.content = ''
     // this.loadComments() // ?????
     this.$emit('func')
    }
   }
  }
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    list: [
     { id: Date.now(), user: '李白', content: '天生我材必有用' },
     { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
     { id: Date.now(), user: '小马', content: '我姓马, 风吹草低见牛羊的马' }
    ]
   },
   beforeCreate(){ // 注意:这里不能调用 loadComments 方法,因为在执行这个钩子函数的时候,data 和 methods 都还没有被初始化好
   },
   created(){
    this.loadComments()
   },
   methods: {
    loadComments() { // 从本地的 localStorage 中,加载评论列表
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     this.list = list
    }
   },
   components: {
    'cmt-box': commentBox
   }
  });

ref获取DOM和组件

vue中如何操作DOM

 <div id="app">
  <input type="button" value="获取元素" @click="getElement" ref="mybtn">
  <h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3>
  <hr>
  <login ref="mylogin"></login>
 </div>
var login = {
   template: '<h1>登录组件</h1>',
   data() {
    return {
     msg: 'son msg'
    }
   },
   methods: {
    show() {
     console.log('调用了子组件的方法')
    }
   }
  }
  // 创建 Vue 实例,得到 ViewModel
  //vm中有一个属性叫ref
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getElement() {
     // console.log(document.getElementById('myh3').innerText)
     // ref 是 英文单词 【reference】  值类型 和 引用类型 referenceError
     // console.log(this.$refs.myh3.innerText)
     console.log(this.$refs.mylogin.msg)
     this.$refs.mylogin.show()
    }
   },
   components: {
    login
   }
  });

总结

以上所述是小编给大家介绍的vue-父子组件和ref实例详解,希望对大家有所帮助!

(0)

相关推荐

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • Vue通过ref父子组件拿值方法

    父拿子的值 <!doctype html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script> </head> <body> <div id="box"> <v-tpl1>

  • vue.js $refs和$emit 父子组件交互的方法

    本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="

  • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue中父子组件注意事项,传值及slot应用技巧

    一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父子组件传值</title> <style> </style> <script src="./vue.js"></script> </head> <bod

  • 详解vue父子组件间传值(props)

    先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入

  • 浅谈Vue父子组件和非父子组件传值问题

    本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat

  • vue 使用ref 让父组件调用子组件的方法

    父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu

  • Vue函数式组件的应用实例详解

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象.也

  • vue-父子组件和ref实例详解

    父组件向子组件传值 <div id="app"> <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el:

  • Vue.js组件高级特性实例详解

    本文实例讲述了Vue.js组件高级特性.分享给大家供大家参考,具体如下: 1 递归 为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己. html: <div id="app"> <deniro-component :count="1"></deniro-component> </div> js: Vue.component('deniro-component',{ name:'deniro-comp

  • Vue组件选项props实例详解

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

  • vue的生命周期钩子与父子组件的生命周期详解

    目录 vue的生命周期钩子的介绍 父子组件的生命周期 加载渲染过程 父组件更新过程 子组件更新过程 父子组件更新过程 销毁过程 代码示例 created和mounted的区别 vue的生命周期钩子的介绍 vue官网中提供的vue的生命周期钩子图 vue的生命周期可以分为8个阶段: 1.创建vue实例涉及的两个钩子 (1)beforeCreate:创建前,vue实例初始化之前调用. 此时的数据观察和事件配置都还没有准备好,而此时的实例中的data和el还是underfined状态,不可用的.Dom

  • vue 组件高级用法实例详解

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • Vue 使用Props属性实现父子组件的动态传值详解

    如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo

  • Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项

  • Vue2.0父子组件传递函数的教程详解

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 学习笔记:在vue2.0中,父组件调用子组件时,想要将父组件中的函数体也做传递. 1. 通过props :需要从子组件传参数到父组件时适

随机推荐