<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>
