父组件里面用属性传递 ,子组件内用peops 接收
<body> <div id="app"> <my-child msg="luoxiaoluo"></my-child> </div></body><template id="child"> <!-- 子组件有且仅有一个最外层元素 --> <div>{{msg}}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>// 引入外部的Vue.js<script> new Vue({ el: "#app", components: { 'my-child': { template: '#child', props: ['msg'] } } })</script> 2.传递的是动态属性的时候,借助 v-bind也是用的props 进行接收
<body> <div id="app"> <my-child :msg="msg"></my-child> </div></body><template id="child"> <!-- 子组件有且仅有一个最外层元素 --> <div>{{msg}}</div></template><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> new Vue({ el: "#app", data: { msg: 'luozhijie' // 注 : 传递的不只可能是字符串 数据 也可能是方法 }, components: { 'my-child': { template: '#child', props: ['msg'] // props 接收的是属性 } } })</script> 可以借助默认属性,如果没有传递值过去 则默认采用默认属性的值 // 结构<body> <div id="app"> <!-- 父组件如果不传递值给子组件的话,就采取默认的属性 --> <!-- <my-child></my-child> --> <my-child :current="current"></my-child> </div></body><template id="child"> <!-- 子组件有且仅有一个最外层元素 --> <div> <div></div> <input type="button" value="点击" @click='current'> </div></template>//方法<script> new Vue({ el: "#app", data: { }, methods: { current() { console.log('这是由父组件的传递过来的值~') } }, components: { 'my-child': { template: '#child', // props: [ 'current'] // props: { // props 传递的是对象 // current: Function // 传递过去的类型Object String Number // } props: { current: { type: Function, // 传递的参数类型 default: () => { // 默认的属性 console.log(666) } // 默认的数据 ,传递过来有值的话就不用 } } } } })</script> 子组件向父组件传递参数第一步 : 父组件在调用了子组件的地方,绑定一个自定义事件(myevent)
事件的定义由父组件实现。在实现的拥有默认的参数(val),值就是子组件
传递给父组件的值
第二步:在子组件的某一个事件内部,通过 this.$emit (‘自定义的事件’,传递的参数)
传递值给父组件。
定义一个事件总线bus 用来进行兄弟之间的传值
定义一个中央的事件总线(let bus =new Vue() ),在需要接收数据的哪一方,
通过bus. o n ( ′ 自 定 义 事 件 ′ , f u n c t i o n ( v a l ) ) 接 收 数 据 , 在 发 送 的 一 方 通 过 b u s . on('自定义事件',function(val){ }) 接收数据,在发送的一方 通过bus. on(′自定义事件′,function(val))接收数据,在发送的一方通过bus.emit(‘自定义的事件’,需要传递的值)发送数据即可,