Vue.js（8）- 父组件给子组件传值

父组件给子组件传值原理：属性绑定

第一步：建立连接

B.vue

<template><div><h3>这是B.vue文件内容</h3><h4>接收到父组件的值----{{msg}}</h4><h4>接收到父组件的值----{{obj}}</h4></div>
</template><script>
export default {// vue要保证props数据的原装行（自读），不建议修改，修改会报错// 如果想要修改，先预存到data中props: ['msg','obj']
}
</script><style lang="less" scoped>
div {border: 2px dashed purple;margin: 20px;h3 {color: green;}
}
</style>

A.vue

<template><div class="one"><h1>这是A.vue文件内容</h1><!-- 属性绑定传值 --><my-b :msg="Amsg" :obj="Aobj"></my-b></div>
</template><script>
// 导入子组件
import B from './B.vue'
export default {// 定义为私有子组件
  components: {'my-b': B},data() {return {Amsg: '这是父组件A的数据',Aobj: {name: "爸爸",age: 40}}}
}
</script><style lang="less" scoped>.one {border: 1px solid red;h1 {color: red;}}
</style>

index.js

// 导入vue
import Vue from 'vue/dist/vue.js'// 导入自定义组件模板
import A from './A.vue'
// 定义为全局子组件
Vue.component('my-a',A)const vm = new Vue({el: '#app',data: {},
})

index.html

<!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>首页</title>
</head><body><div id="app"><p>这是index.html</p><my-a></my-a></div></body></html>

第二步：传值

第三步：子组件接收值并修改值

父组件传递过来值，如果要修改父组件的值，怎么办？

简单数据类型：直接在data中return定义，接收props中的值

　　复杂数据类型：

　　对象在传递过程中，它是把这个对象的引用传递过去了，在内存空间中仍然指向同一块区域；

　　不像字符串，字符串是直接复制一份传递过去的，在内存空间中指向新的区域

　　解决办法：深拷贝

安装包：

使用：

转载于:https://www.cnblogs.com/houfee/p/9963575.html

Vue.js（8）- 父组件给子组件传值相关推荐

java父窗口传值给子窗口_【赖国荣】js实现父窗口与子窗口传值
1.变量的定义与使用,条件语句,循环语句和数组的使用: 2.定义和使用对象:this语句的使用:isNaN,eval函数的使用: 4.类型转换函数parseInt,parseFloat使用: 5.打开 ...
（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...
vue.js：父组件向子组件传递数据props
笔记代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><meta na ...
vue.js：父组件和子组件
父组件和子组件 1.创建两个组件 const cpnC1 = Vue.extend({template:`<div><h2>我是标题1</h2><p>我 ...
Vue.js 父组件向子组件传值和子组件向父组件传值
父组件向子组件传值组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>// 创建 Vue 实例,得到 ViewModelvar vm = new ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

Vue.js（8）- 父组件给子组件传值

第一步：建立连接

第二步：传值

第三步：子组件接收值并修改值

Vue.js（8）- 父组件给子组件传值相关推荐

最新文章

热门文章