vue给组件传递不同的值方法

这里讲解一下Vue 官网的一个实例，Vue将数据遍历传递给多个组件，这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的，我们需要给组件传递不同的值，来实现不同的展现，实现代码的复用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Vue实例：父组件给子组件传递不同的值</title>
 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){
 //全局创建一个Vue组件
 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
 })

 //创建一个vue实例
 var app7 = new Vue({
  el: '#app',
  data: {
   groceryList: [
    { id: 0, text: '蔬菜' },
    { id: 1, text: '奶酪' },
    { id: 2, text: '随便其它什么人吃的东西' }
   ]
  }
 })
}

</script>
<body>
 <div id="app">
  <ol>
   <!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”。-->
   <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </ol>
 </div>
</body>
</html>

代码分析：

这里我直接使用了一个Vue的CDN，然后实例化Vue对象就可以使用。

创建一个vue实例

var app7 = new Vue({
  el: '#app',
  data: {
   groceryList: [
    { id: 0, text: '蔬菜' },
    { id: 1, text: '奶酪' },
    { id: 2, text: '随便其它什么人吃的东西' }
   ]
  }
 })

全局创建一个Vue组件

 Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
 })

通过Vue的实例给组件赋不同的值（通过bind绑定值到一个变量上，子组件通过props接受传入的这个变量值） 

<div id="app">
  <ol>
   <!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”。-->
   <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
  </ol>
 </div>

以上这篇vue给组件传递不同的值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 组件传值几种常用方法【总结】

    使用vue也有很多年了,一直都没有整理一下相关知识,给大家总结下开发过程中所遇到的一些坑,主要给大家总结一下vue组件传值的几种常用方法: 1.通过路由带参数传值 ① A组件通过query把id传给B组件 this.$router.push({path:'/B',query:{id:1}}) ② B组件接收 this.$route.query.id 2.父组件向子组件传值 使用props向子组件传递数据 子组件部分:child.vue <template> <div> <ul

  • vue-自定义组件传值的实例讲解

    项目中,我们经常会遇到自定义组件传值的问题,方法很多种,但是原理很简单,下述文档总结实际项目中使用的传值方式. 父组件传递给子组件某一值,子组件内会修改该值,然后父组件需要获取新值 在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop给子组件下发数据,子组件通过事件给父组件发送消息. 自定义组件传值 常规prop-event 父组件 <prop-event-value :address="address" @update="v

  • vue父组件向子组件传递多个数据的实例

    在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去 这里主要看一下动态的数据绑定.比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件. 但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办? 这里就通过一个例子来说明一下: 子组件

  • vue中各组件之间传递数据的方法示例

    vue中各组件之间传递数据的方法示例

    前言 本文主要给大家介绍了关于vue组件之间传递数据的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 作用域 在vue中,组件实例的作用域是孤立的,父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用域内编译.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据. 下面几种方法可以实现组件之间数据的传递. 一.通过prop传递数据 1)在子组件中,使用prop属性,显示的表明,它所需要的数据. 2)在父组件中,需要引用子组件的地方,传入数据.

  • vue.js组件之间传递数据的方法

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe

  • 深入理解Vue 组件之间传值

    一.父组件向子组件传递数据 在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用props: ['logo'] 在 props 中添加了元素之后,就不需要在 data 中再添加变量了 父组件部分: 在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg 然后就能将App.vue中 logoM

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • vue给组件传递不同的值方法

    这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递给多个组件,这个是我们实际开发中常做的事情.一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)

    最近开始在用elementUI做一个后台管理系统项目,遇到一个问题,需求是这样,在父组件有一个按钮,点击按钮会显示弹窗(子组件),在子组件中用的是elementUI 的el-diolog弹窗组件,在关闭弹窗时(elementUI自带事件)便会报错.话不多说直接上代码. DEMO 这是父组件的代码: <template> <div> <app-refund :dialogVisible="refundVisible"></app-refund&g

  • vue 通过 Prop 向子组件传递数据的实现方法

    这是一个通过 Prop 向子组件传递数据的小例子. 代码: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; text-decoration: none; } </style> &

  • vue实现组件通信的八种方法实例

    目录 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 3.bus(事件总线) 兄弟组件通信 4.$parent.$children 直接访问组件实例 5.$refs 6.provide/inject(提供/注入) 多组件或深层次组件通信 7.slot(slot-scope作用域插槽) 子元素-->父元素(类似于通信) 8.vuex状态管理 总结 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结 1.props

  • vue3.0 子组件如何修改父组件传递过来的值

    目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样

  • 快速了解Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child f

  • JQuery选中select组件被选中的值方法

    jquery获取select选择的文本与值 获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0).selectedindex; 设置select: 设置se

  • 使用use注册Vue全局组件和全局指令的方法

    Vue中的组件和指令分为局部组件.局部指令和全局组件.全局指令.对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了. 全局组件 在Vue官方文档中介绍的是使用Vue.component(tagName, options)来创建一个全局组件.但是这种方法是与根实例写在同一个文件中,如果要同时注册多个全局组件,就会使根实例文件过重,因此使用Vue.use()来"安装"全局组件,就显得更轻一些. 方法: 1.新建一个plugins文件夹 2.在文件夹中创建放置全局

  • vue兄弟组件传递数据的实例

    在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, template: '<App/>', components: { App }, data:{ eventHub:new Vue() // 在main.js设置所有组件都能用调用 }, }) 我们再组件一设置一个事件调用组件二的事件,传递数据给组件二 <template> <div v-on:click="on()&q

  • 浅谈vue中子组件传值的默认值情况

    当父组件中的content值没有传入时,子组件利用default属性设置默认值,此情况时,页面会显示default value. 当传入content的值时,default属性的默认值不生效,界面显示为: 补充知识:Vue父组件向子组件传值遇到的BUG 当子组件中含有props属性,使用ref对其中的prop属性赋值时报错 Avoid mutating a prop directly since the value will be overwritten whenever the parent

随机推荐