vue组件实现父组件向子组件传值、子组件用父组件的方法、父组件用到子组件数据及方法

要实现此功能应该要先学会vue组件父组件可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要的传递的值传递给子组件内部，供子组件使用注意：v-bind：绑定名（随便取，但是要跟子组件里的props里的声明保持一致，）props中的数据是只读的不能重新赋值...

子义间

21405人浏览 · 2019-10-09 17:01:09

子义间 · 2019-10-09 17:01:09 发布

要实现这些功能应该要先学会vue组件

一、父组件向子组件传值

父组件可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要的传递的值传递给子组件内部，供子组件使用，自定义属性

注意：v-bind：绑定名=“父组件data中的属性”（随便取，但是要跟子组件里的props里的声明保持一致，）
props中的数据是只读的不能重新赋值
在子组件的数据绑定中就是用v-bind：绑定名这个，就是代表的是父组件传过来的数据

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <mysoncom :son="mas"></mysoncom>
</div>
<template id="mysoncom">
    <div style="background: #666;width: 500px;height: 100px;">
        <h2>实现父组件向子组件传值</h2>
        <span>{{son}}</span>//此处的{{son}}就是子组件的v-bind：绑定名
    </div>
</template>
</body>
</html>

var vm = new Vue({
    el: '#app',
    data: {
        mas:"我是父组件的数据",
    },
    methods: {
    },
    components: {
        mysoncom:{
            template:'#mysoncom',
            data:function () {
                return {}
            },
            methods:{},
            props: ['son'],//组件中的所有props数据，都是通过父组件传递给子组件的。把父组件传递过来的son属性，先在props中定义一下，才能使用
        },
    },
})

二、子组件用父组件的方法

父组件向子组件传递方法，使用的是事件绑定机制；v-on（@），也是先自定义事件属性，然后子组件通过某些方法调用传过来的方法
注意：v-on：绑定名=“父组件的方法”
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <mysoncom @soncilck="show" ></mysoncom>
</div>
<template id="mysoncom">
    <div style="background: #666;width: 500px;height: 100px;">
        <h2>实现子组件用父组件的方法</h2>
        <input type="button" value="父组件的show方法" @click="myclick"><!--myclick是子组件自己的方法，是用来调用父组件的方法的-->
    </div>
</template>
</body>
</html>

var vm = new Vue({
    el: '#app',
    data: {
        mas:"我是父组件的数据",
    },
    methods: {
        show(){
            alert("我是父组件的方法")
        },
    },
    components: {
        mysoncom:{
            template:'#mysoncom',
            data:function () {
                return {}
            },
            methods:{
                myclick(){
                    this.$emit('soncilck')
                },
            },
        },
    },
})

当方法要传参数的时候，可以直接在子组件的momethods中的$emit方法中传，不要在html中的方法调用里传

子组件中

methods:{
        myclick(){
               this.$emit('soncilck',a,b)//a,b表示要传的参数
        },
},

父组件的methods中

methods: {
        show(a,b){
            alert("我是父组件的方法"+a+b);
        },
},

三、子组件传值到父组件利用ref获取dom元素从而实现功能

注意：
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <input type="button" value="获取子组件的数据" @click="getval">
    <input type="button" value="获取子组件的方法" @click="getclick">
    <mysoncom ref="sondata" ></mysoncom>
</div>
<template id="mysoncom">
    <div style="background: #666;width: 500px;height: 100px;">
        <h2>实现父组件用子组件的数据和方法</h2>
    </div>
</template>
</body>
</html>

var vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
        getval(){
            console.log(this.$refs.sondata.aaa)
        },
        getclick(){
            this.$refs.sondata.sonshow();
        }
    },
    components: {
        mysoncom:{
            template:'#mysoncom',
            data:function () {
                return {
                    aaa:'我是子组件的数据'
                }
            },
            methods:{
                sonshow(){
                    alert("子组件的方法")
                },
            },
        },
    },
})

子组件传值到父组件介绍两种方法

1.利用$emit 实现

子组件
<template>
    <div>
        <input @input="onInput" :value="value1"/>//@input表示当input框改变时会立即触发onIpute函数
    											//:value表示v-bind:value，表示value的值是一个变量
    </div>
</template>

<script>
export default {
    props: {
        value1: {
            type: String
        }
    },
    methods: {
        onInput(e) {
            this.$emit("valueChanged", e.target.value)//通过$emit向父组件传一个事件，并传参
        }
    }
}
</script>



父组件
<template>
    <info :value="myValue" @valueChanged="e => myValue = e"></info>
    //通过子组件的$emit传的事件利用@把他展示出来并执行里面的内容。e => myValue = e表示的是箭头函数，相当于function（e）｛ myValue = e｝
</template>

<script>
    inport info from './info.vue';
    export default {
        components: {
            info,
        },
        data() {
            return {
                myValue: 1234,
            }
        },
    }
</script>

2.利用.sync修饰符

子组件
<template>
  <div class="hello">
    <input @input="onInput" :value="value1"/>  //@input表示当input框改变时会立即触发onIpute函数
    										   //:value表示v-bind:value，表示value的值是一个变量（value1）
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    value1: {
      type: String
    }
  },
  methods: {
    onInput(e) {
      this.$emit("update:title", e.target.value)//利用$emit实现向父组件传数据，利用update：名字向父组件传值
    }
  }
}
</script>


父组件
<template>
  <div id="app">
    <HelloWorld :title.sync="myValue"/>//通过.sync修饰符拿到子组件的值赋值到myValue中
    <div>{{myValue}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'//引入组件

export default {
  name: 'App',
  data() {
    return {
      myValue: 123321321334,
    }
  },
  components: {
    HelloWorld
  }
}
</script>

注意：父子组件实现双向数据绑定时，不能直接改props的值，因为props值是只读的，不能更改，如果要实现更改的话，配合使用$emit跟watch属性进行双向数据绑定
例如

子节点
<template>
  <div class="hello">
  	<input @click="btn" type='button'/>  
    <div v-if="show">123456</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: ['showdate'],
  data () {
  	return {
  		show: this.showdate
  	}
  }
  },
  methods:{
  	btn(){
  	this.$emit('update:title',false)
  	}
  },
 	watch:{
 		showdate(){
 			this.show = this.showdate
		}
 	}
}
</script>


父组件
<template>
  <div id="app">
  <input @click="btn132" type='button'/>  
    <helloworld :title.sync="myValue"/>//通过.sync修饰符拿到子组件的值赋值到myValue中
    <div>{{myValue}}</div>
  </div>
</template>

<script>
import helloworld from './components/HelloWorld.vue'//引入组件

export default {
  name: 'App',
  data() {
    return {
      myValue: false,
    }
  },
  methods：{
	btn132(){
		this.myValue = !this.myValue
	}
  },
  components: {
    helloworld 
  }
}
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^