您的位置: 首页  >  IT文章  >  40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

分类: IT文章 • 2023-10-30 09:18:55

父组件向子组件里传参,props的使用实例

例子一

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue</title>
	<link rel="stylesheet" href="">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>
<body>
<div >
	<!--hd="abc"传递字符串 :show-title:加上冒号传递的就是一个变量了(注意驼峰命名和-号命名的写法) -->
	<hd-news hd="abc" css="testcss" :list="news" :show-title="showTitle"></hd-news> <!--引入模板 和new Vue()里的components里注册时的名字 hdNews 要一致-->


</div>
<script type="text/x-template" >
	<div>
		<span>{{hd}}</span>
		<span>{{css}}</span>
		<li v-for="(v,k) in list">
			{{v.title}}
			<button v-if="v.show" @click="list.splice(k,1)">删除</button>
			<input v-model="v.show" type="checkbox">显示删除按钮
			<button v-if="!v.show" @click="v.show?v.show=false:v.show=true">显示删除按钮</button>
		</li>
		{{showTitle}}
	</div>

</script>
<script>
    var hdNews={
        //绑定 的 x-template模板
        template:'#hdNewstemplate',
        data(){
            return {}
        },
		//用于接收父组件里传过来的数据,注意驼峰命名和-号命名的写法
		props:['hd','css','list','showTitle'],
        methods:{}
    };
    new Vue({
        el:'#hdcms',
        //绑定组件hdNews  hdNews:hdNews简写成hdNews
        components:{hdNews},
        data:{
            news:[
                {id:0,title:'tpshop',num:1,show:false},
                {id:1,title:'hdcms',num:1,show:false}
            ],
            showTitle:'hello vue.',
		},
    });
</script>
</body>
</html>

效果:

40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

例子二:

<!DOCTYPE html>
<html lang=”zh-cn”>

<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>
</head>

<script type=”x-template” id=”father”>
    <div>
        <h2 style=”color:blue”>{{hello}}</h2>
            {{apptoshuaiqm}}
        <childer :shuai-qmtochilder=”shuaiQmGiveMe” />
    </div>
</script>

<script type=”x-template” id=”childer”>
    <div>
        <h2 style=”color:blue”>{{hello}}</h2>
        {{shuaiQmtochilder}}
    </div>
</script>

<body>
    <div id=”app”>
        <shuai-qm apptoshuaiqm=”我是app传过来的值”></shuai-qm>
    </div>

    <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
    <script>
        var childer = {
            props: ['shuaiQmtochilder'],
            data() {
                return {
                    hello: 'hello i’m dawangraoming',
                }
            },
            template: '#childer'
        }


        var father = {
            props: ['apptoshuaiqm'],// 这里大家一定要注意，请完全使用小写传参
            data() {
                return {
                    hello: 'hello world',
                    shuaiQmGiveMe: '我是从shuaiQm传过来的值'
                }
            },
            template: '#father',
            components: {
                'childer': childer
            }
        }




        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                isTrue: true,
            },
            components: {
                'shuaiQm': father,
            }
        })
    </script>
</body>

</html>

相关推荐