首页 > 编程知识 正文

vue不相关组件传值,vue中的组件传值方式

时间:2023-05-03 15:03:20 阅读:266648 作者:3031

父组件传子组件 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. 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(‘自定义的事件’,需要传递的值)发送数据即可,

!!!! --- 一定是先接收再发送 // 结构<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>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。