一、子组件向父组件传值
- 1、子向父传值 须要用到自界说变乱 $emit。
- 2、this.$emit('自界说的变乱名')
- 3、当自界说变乱触发时，所绑定的函数，就能主动得到这个变乱在创建的时候 所写的参数
- 4、一样平常 子向父传值，自界说变乱写在 子组件内里
- 5、然后在 父组件中 子标签上 触发这个自界说属性
- 6、当触发自界说变乱(byval)时，就能获取到自界说变乱上所携带的数据(this.cdata)
- 7、父组件中 子组件的标签上触发变乱，由于变乱的触发 必须绑定函数
- 8、以是在父组件中我们须要界说一个接收数据的函数，这个函数 可以主动得到 子组件中转达过来的参数(数据)
二、父组件向子组件传值
第一种写法有数据范例，type写什么数据范例，就能转达什么数据范例
假如你界说的数据范例不匹配，则会根据设置的数据范例欺压转化
第二种写法 不规定数据范例时，按照下面的写法
- 2、然后在父组件内利用 子组件props界说的变量传值
三、末了子传父、父传子的结果图
两组件的代码如下
子组件 Child.vue
<template> <div id="child"> <h1>{{ msg }}</h1> <button @click="sendData">子向父传值</button> <!-- 父组件中的数据 --> <h2>{{ abc }}</h2> <h3>{{ aaa }}</h3> </div></template><script>export default { name: 'Child', data() { return { msg: '这是子组件', cdata : '这是子组件中的数据', } }, props : { abc : { // 界说父组件转达过来的数据范例 type : String, requored : true, // 假如你界说的数据范例不匹配，则会根据设置的数据范例欺压转化 } }, // 不规定数据范例时，按照下面的写法 props: ["abc", 'aaa'], methods: { sendData() { console.log(this); // 子向父传值 须要用到自界说变乱 $emit // this.$emit('自界说的变乱名') // 当自界说变乱触发时，所绑定的函数，就能主动得到这个变乱在创建的时候 所写的参数 this.$emit('byval',this.cdata); } }}</script><style lang="less" scoped>#child { padding: 10px; border: 3px solid #007aff; width: 90%; height: 400px; margin: auto;}</style>></style>父组件 Father.vue
<template> <div id="father"> <h1>{{ msg }}</h1> <!-- 子组件中的数据 --> <h2>{{ data1 }}</h2> <!-- 子组件 --> <Child :abc="fdata" :aaa="aaa" @byval="getdata" /> </div></template><script>// 引入子组件import Child from '@/components/Child.vue';export default { name: 'Father', data() { return { msg: '这是父组件', fdata: '这是父组件内里的数据1', aaa: '这是父组件内里的数据2', data1: '', } }, components: { Child, }, methods: { // 界说一个获取子组件传值的方法 getdata(datas) { // datas 就是子向父传过来的数据 // 由于函数内的参数 不能直接用于渲染 // 以是我们须要在父组件的data中 界说一个变量 // 来接收一下 子组件转达过来的参数 this.data1 = datas; } }}</script><style lang="less" scoped></style>></style> |
