Vue父子组件传递数据

<template><div><!-- 直接通属性过传递值 --><!-- 下面这个中没有动态绑定的 --><!-- <div><Soni  name='林北辰' age='25' phone='13602388099'/></div>  --><!-- 动态绑定加冒号 --><!-- 虽然后面的phone没有去掉引号 但这个会影响搜索性能 (字符串类型) --><!-- 使用数字类型能提高性能 --><!-- 布尔类型的真假也要动态绑定 --><!-- bb为参数名字 cc为数据对象的名字 --><!-- <div><Soni name="林北辰" :age="25" :phone="13602388099" :bb="cc" /></div> --><!-- 加上传递的方法 --><div><Soniname="林北辰":age="25":phone="13602388099":bb="cc":func1="func1":func2="func2"/></div><!-- <div><Lifeone /></div> --><div><!-- <TestFilter /> --></div><div><!-- <TestEvent /> --></div><div><!-- <Test /> --></div><div><!-- <Otherinstruct /> --></div><div><!-- <ListRendera /> --></div><div><!-- <ListRender /> --></div><div><!-- <IfAndShow /> --></div><div><!-- <TestStyle /> --></div><div><!-- <TestClass /> --></div><div><!-- <Testtwo /> --></div></div>
</template><script scoped>
// import Testtwo from "@/components/Testtwo";
// import TestClass from "@/components/TestClass";
// import TestStyle from "@/components/TestStyle"
// import IfAndShow from "@/components/IfAndShow";
// import ListRender from '@/components/ListRender.vue';
// import ListRendera from '@/components/ListRendera.vue';
// import Otherinstruct from "../components/Otherinstruct.vue";
// import Test from "../components/Test.vue";
// import TestEvent from "@/components/TestEvent";
// import TestFilter from "@/components/TestFilter";
// import Animation from "@/components/Animation";
// import Lifeone from "@/components/Lifeone";
import Soni from "@/components/Soni";
export default {name: "Body",data() {return {cc: {name: "叶天罡",age: "58",},};},components: {// Testtwo,// TestClass,// TestStyle,// IfAndShow,// ListRender,// ListRendera,// Otherinstruct,// Test,// TestEvent,// TestFilter,// Lifeone,Soni,},methods: {// 传递过去子组件的方法func1() {alert("弹窗");},// 接受子组件传递过来的数据func2(name, age) {alert(`姓名: ${name} 年龄: ${age}`);},},
};
</script><style scoped>
</style>

<template><div><div><h3>Soni</h3></div><div><h3>props副组件传值给子组件</h3><h4>姓名:{{ name }}</h4><h4>年龄:{{ age }}</h4><h4>手机号码:{{ phone }}</h4><!-- bb为参数名字 --><!-- 父组件传递过来的参数为bb  bb里面的数据为cc --><h4>{{ bb }}</h4><h3>传递方法</h3><button @click="func1">方法绑定按钮</button><button @click="func2('内心受到一万点伤害', '25')">子组件向父组件传递数据</button></div></div>
</template><script>
export default {name: "Soni",//   父组件传过来的值需要声明属性（传了什么过来）//   props: ['name','age','phone'], 这种是没有限定传递类型的（不用，因为你会挨刁的）// 所以，传递的值需要限定类型//   初级写法//   props: {//     name: String,//     age: Number,//     phone: Number,//     // 传递一个对象(Object)//     // bb为父组件的参数名字//     bb: Object,//     // 传递一个方法//     func1:Function,//      // 传递一个方法//     func2:Function,//   },// 高级写法// 定义类型,必须传(是否),默认值   required必须?// 这里的默认值是接受的默认值props: {name: { type: String, required: true, default: "大佬" },age: { type: Number, required: true, default: 99 },phone: Number,bb: Object,func1: Function,func2: Function,},
};
</script><style>
</style>

Vue父子组件传递数据相关推荐

Vue 3 父子组件传递数据的几种通信方式 (Prop、自定义事件、v-model...)
Vue 3 官方文档 (中文):https://v3.cn.vuejs.org/guide/introduction.html 对比 Vue 2 的一些变化 v-on 的 .native 修饰符已被移 ...
uni-app父子组件传递数据
新建项目新建组件 <template><view>edit</view> </template><script>export defaul ...
Vue父子组件传递/子传父
1.子传父的意思就是,,子组件内容传给父组件,,使父组件可以随时使用子组件传来的数据,使用方法为:自定义函数 1.首先我们来做一个仿淘宝侧边栏商品,点击或者鼠标移动到上面出现内容商品案例 2.以上面这 ...
VUE父子组件-传数据的理解
1.概述. 父组件对子:利用props接收参数.应用场景:对于可复用的子组件,传参使子组件复用. 子向父传递:利用事件机制.在子组件触发事件时,利用emit设置传的参数以及对应的函数名发送给父组件内的 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...

Vue父子组件传递数据

Vue父子组件传递数据相关推荐

最新文章

热门文章