Vue组件实现值的传递详解！！！

最新推荐文章于 2025-04-11 16:31:49 发布

养只月亮412

最新推荐文章于 2025-04-11 16:31:49 发布

阅读量107

点赞数

文章标签： vue.js jquery javascript

本文链接：https://blog.youkuaiyun.com/TC0221/article/details/120662161

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--1. 定义id为app的div-->
<div id="app">
<!--6.将名为myname的组件渲染    -->
<!--8.遍历的items的值定义为item，并利用v-bind绑定到xmj这个参数，到挂在vue的地方利用props接收-->
    <myname v-for="item in items" v-bind:xmj="item"></myname>
</div>
<!--2.引入script文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--3.写script标签挂载数据-->
<script>
// 5.写component组件,起名myname ,注意不可大写
Vue.component("myname",{
    //9.接收item的值,template模板渲染
    props:['xmj'],
    template:'<li>{{xmj}}</li>'
});
<!--4.挂在id为app的div    -->
    var vm = new Vue({

        //挂载
        el:"#app",
        //数据
        data:{
            items:["java","html","js","jquery"]  //7.写items数组，到myname标签内遍历出来
        }
    })
</script>
</body>
</html>

在这里插入图片描述