解释不够官方,请多多担待。
先创建一个zi.vur(子组件)和fu.vue(父组件)
在zi.vue中展示一些自定义的代码
<table>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
<td>5555</td>
</tr>
</table>
如何接下来要往父组件传值的话可以加一个点击函数
<button @click="zi_value">子组件向父组件传值</button>
接下可以设置一下子组件往父组件里传的值,下面咱就直接把值写成死的如果用的话改一下就好。
export default{
darta(){
return{
value: '再坚持两分钟'
}
}
然后通过点击函数把数据传输到的父组件就好。
methods: {
ss(){
this.$emit('str', this.value) # value数据赋值给str,把str传到后面。
}
},
然后就开始写fu.vue了
先把zi.vue导入到fu.vue里面
import zi from './zi' // 因为在同一目录下面一个点就好
展示zi.vue的内容
<zi :str="ta" @ll="get_num"> # get_num是用来接收zi.vue传来的值。str是向zi.vue传的值
export default{
components:{
zi
}
}
定义一下往zi.vue传的值和接收zi.vue传来的值得变量
data() {
return {
ta: '', // 想zi.vue传的数据
data:'' // 接收zi.vue传来值得变量
}
},
然后上面写个点击函数 把点击函数附上值
methods: {
xx(){
this.ta = 'xxxxxxxxxxxxxxxxx'
},
在设置一个方法接收传来的数据
get_num(val){
console.log(val)
this.data = val
}
最后在zi.vue里面设置一个接收函数 然后把接收到的数据展示出来就行
在export default里面写
props:['ta'] ['传过来的函数是什么就写什么']
然后在div里面{{ta}}
以上就是怎么个流程
下面是我自己的代码,但是设的变量名有点low了,主要是英语水平有限请多多担待
代码可以复制
-------------------------zi.vue:
1111 | 2222 | 3333 | 4444 | 5555 |
<!-- 点击函数 ss为方法 -->
<button @click="ss">啦啦啦啦</button><br>
<!-- 展示父组件传过来的数据 -->
{{ta}}
</div>
------------------------fu.vue
第一个 ta是是子组件传来的值,第二ta是父组件用来接收的。 ll是子组件传来的值,get_num用来接收 zi是直接展示组件
点击函数,传送数据
<button @click="xx">点点点
{{data}}
</div>