vue中父组件和子组件之间传值

解释不够官方，请多多担待。

先创建一个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：

------------------------fu.vue

标签：vue,zi,函数,中父,组件,接收,ta
来源： https://www.cnblogs.com/lqpboke/p/13904320.html