父组件传子组件
- 1.传递的是字符串的时候
父组件里面用属性传递 ，子组件内用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 (‘自定义的事件’，传递的参数)
传递值给父组件。
<body>
<div id="app">
<!--
第一步 ： 父组件在调用了子组件的地方，绑定一个自定义事件（myevent）
事件的定义由父组件实现。在实现的拥有默认的参数（val），值就是子组件
传递给父组件的值
-->
<my-child @myevent='getData'></my-child>
</div>
</body>
<template id="child">
<!--
在子组件的某一个事件内部，通过this.$emit('自定义的事件'，传递的参数)
传递值给父组件。
-->
<div>子组件<input type="button" value="发送数据" @click='sendData'></div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app', // 挂载点
components: { // 组件 ---> 需要注册的组件
'my-child': { // 子组件的名字
template: '#child', // 模板 ---> 可以是html结构 也可以是挂载点
methods: { // 子组件内触发这个方法
sendData() {
this.$emit('myevent', '这个数据是有子组件传递的')
}
}
}
},
methods: {
getData(val) { // 事件的定义由父组件实现
console.log(val);
}
}
})
</script>
兄弟之间的传值
定义一个事件总线bus 用来进行兄弟之间的传值
定义一个中央的事件总线（let bus =new Vue() ）,在需要接收数据的哪一方,
通过bus. emit(‘自定义的事件’,需要传递的值)发送数据即可，！！！！ --- 一定是先接收再发送
// 结构
<body>
<div id="app">
<my-content></my-content>
<my-footer></my-footer>
</div>
</body>
<template id="content">
<div>
<!-- <input type="button" @click="getData" value="接收数据">
{{type}} -->
<button @click="getData">关注公众号</button>
{{ type }}
</div>
</template>
<template id="footer">
<ul>
<li @click="sendData('首页')">首页</li>
<li @click="sendData('分类')">分类</li>
<li @click="sendData('购物车')">购物车</li>
<li @click="sendData('我的')">我的</li>
</ul>
</template>
// Vue代码
<script>
/**
* 定义一个中央的事件总线（let bus =new Vue() ）,在需要接收数据的哪一方,
* 通过bus.$on('自定义事件',function(val){ }) 接收数据，在发送的一方,
* 通过bus.$emit('自定义的事件',需要传递的值)发送数据即可，
* ！！！！ --- 一定是先接收再发送
*
* */
let bus = new Vue() // 定义一个中央的事件总线
new Vue({
el: '#app',
components: { // 注册组件里面
'my-content': {
template: '#content',
data() {
return {
type: '首页'
}
},
methods: {
getData() {
bus.$on('myevent', (val) => {
/**
* 箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象)
* */
console.log('val', val)
this.type = val
// console.log(this.type)
})
}
}
},
'my-footer': {
template: '#footer',
methods: {
sendData(str) {
// console.log('str', str)
bus.$emit('myevent', str)
}
}
}
}
})
</script>
