Vue （第2篇教程父组件与子组件传值）

最新推荐文章于 2024-03-06 17:47:03 发布

一只程序猿小白

最新推荐文章于 2024-03-06 17:47:03 发布

阅读量221

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42540989/article/details/98481824

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

1、父组件传值给子组件（父传子）

<!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>CSDN:https://blog.csdn.net/qq_42540989</title>
</head>
<body>
    <div id="app">
        <h3>我是父組件:---{{msg}}</h3>
        <com1></com1>   //我是子组件
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var com1= {
            template: "<h3>我是子組件:---</h3>"
    }
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "web前端开发工程师"   //父组件要传递的值
        },
        methods: {},
        components:{
            com1
        }
    })
</script>
</html>

基础页面如上

1.现在我们要将vue实例中的msg传给子组件。首先：父组件在引用子组件的时候，可以通过v-bind（属性绑定）以属性绑定的形式，将传递的数据传递到子组件内部，供子组件使用。

 <div id="app">
     <h3>我是父組件:---{{msg}}</h3>
     <com1 v-bind:parentmsg='msg'></com1>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var com1 = {
        template: "<h3>我是子组件---{{parentmsg}}</h3>",
        props:['parentmsg']
    }
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "web前端开发工程师"
        },
        methods: {},
        components:{
            com1
        }
    })

此时子组件已拿到父组件传递的值。

2、子传值传值给父组件（子传父）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>子传父</title>
</head>
<body>
	 <div id="app">
        <h3>我是父組件:---{{msg}}</h3>
        <com1></com1>
    </div>
    <template id="temp">
    	<div>
    		<h3>我是子组件:---</h3>
    	    <input type="button" value="我是调用父组件的方法">
    	</div>   	
    </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var vm = new Vue({
		el:'#app',
		data:{
			msg:''
		},
		methods:{},
		components:{
			com1
		}
	})
	var com1 = {
		template:'temp',
		data(){

		},
		methods:{}
	}
</script>
</html>

基础页面如上：

1.现在我们可以通过将父组件中的方法传递给子组件调用，然后通过传参的形式来实现数据的传递效果，也就是在子组件中创建一个按钮，定义一个点击事件，点击事件里用this.$emit方法触发一个自定义事件，并传递一个参数。

<body>
	 <div id="app">
        <h3>我是父組件:---{{msg}}</h3>
        <com1 v-on:func="show"></com1>
    </div>
    <template id="temp1">
    	<div>
    		<h3>我是子组件:---{{sonmsg}}</h3>
    	    <input type="button" value="我是调用父组件的方法" @click="onclick()">
    	</div>   	
    </template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var com1 = {
		template:'#temp1',
		data(){
           return{
           	sonmsg:{
           		name:'我是子组件传递给父组件的值'
           	}
           }
		},
		methods:{
			onclick(){
               this.$emit('func',this.sonmsg)
			}
		}
	}
	var vm = new Vue({
		el:'#app',
		data:{
			msg:null
		},
		methods:{
			show(data){
				this.msg = data
			}
		},
		components:{
			com1
		}
	})
</script>
</html>

此时父组件已经拿到子组件传递的值。

一只程序猿小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue （第2篇教程父组件与子组件传值）

1、父组件传值给子组件（父传子）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫