关于 Vue 父子组件传值 #14

GRPdream · 2019-04-24T11:33:51Z

子组件获取父组件的值——Props属性

1.在子组件标签上定义值名

 <child :parentmsg="parentmsg" ></child>

2.在子组件的 Vue 实例上定义 props

 props:["parentmsg"],

3.通过定义的值名使用父组件的数据。（PS: props属性是单项绑定的，即父组件内改变值子组件中的也会改变，反过来则不会）

子组件使用父组件的函数——emint属性

1.在子组件标签上定义函数名

 <child @func="parentMethod"></child>

2.在组件函数中通过emit调用父组件函数

UseparentMethod(){
            this.$emit('func')
          },

父组件使用子组件的函数——ref属性

1.在子组件标签上定义 ref 属性

<child ref="child"></child>

2.在组建函数中通过 this.refs.child.函数名 调用

UsechildMethod() {
        this.$refs.child.sonMethod()
      },

父组件获取子组件的值—— ref + emit 属性

1.在子组件标签上定义 ref 并绑定函数名

<child ref="child" @func2="sonMsg"></child>

2.在父组件定义一个函数用以调用子组件的传参函数

parentclick(data) {
        this.$refs.child.dataToParent()
      },

3.在子组件定义一个函数并将函数写进函数的形参中

dataToParent() {
            this.$emit('func2', this.childmsg)
          }

4.在父组件在定义一个使用子组件数据的函数

sonMsg(data) {
        console.log(data);
      }

demo页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <child :parentmsg="parentmsg" @func="parentMethod" @func2="sonMsg" ref="child"></child>
    <h3>parent</h3>
    <input type='button' value='使用子组件的函数' @click='UsechildMethod'>
    <input type='button' value='获取子组件的数据' @click='parentclick'>
  </div>
  <script>
    var vm = new Vue({
    el: '#app',
    data:{
      parentmsg: "I'm the parent",
    },
    methods:{
      parentMethod() {
        console.log("You have used parent's func");
      },
      UsechildMethod() {
        this.$refs.child.sonMethod()
      },
      parentclick(data) {
        this.$refs.child.dataToParent()
      },
      sonMsg(data) {
        console.log(data);
      }
    },
    components: {
      child: {
        template: "<div><h3>Child</h3><input type='button' value='输出父组件的数据' @click='sonclick'> <input type='button' value='使用父组件的函数' @click='UseparentMethod'></div>",
        data:function() {
          return {
            childmsg: "I'm the child",
          }
        },
        props:["parentmsg"],
        methods: {
          sonclick() {
            console.log(this.parentmsg);
          },
          UseparentMethod(){
            this.$emit('func')
          },
          sonMethod() {
            console.log("You have used son's func");
          },
          dataToParent() {
            this.$emit('func2', this.childmsg)
          }
        },
      }
    }
    })
  </script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

关于 Vue 父子组件传值 #14

关于 Vue 父子组件传值 #14

GRPdream commented Apr 24, 2019

关于 Vue 父子组件传值 #14

关于 Vue 父子组件传值 #14

Comments

GRPdream commented Apr 24, 2019

子组件获取父组件的值——Props属性

子组件使用父组件的函数——emint属性

父组件使用子组件的函数——ref属性

父组件获取子组件的值—— ref + emit 属性

demo页面