vue的组件component

1.模板template：用来写html视图的代码

2.props：用来接收component组件标签的参数

3.组件标签上的v-bind是用来获得vue的数据传递给组件component上的props

4.组件component上的事件可以通过自定义事件触发vue的事件，现在component里定义方法，在组件标签内把自定义的方法绑定到vue中的方法。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    vue向component发送消息-->
    <component-hello :msg="message"></component-hello>
<!--    component的事件触发vue的事件-->
    <component-click @vue-hello="hello"></component-click>
</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    Vue.component("component-hello",{
        props:['msg'],
        template:`<div>{{msg}}</div>`
    });
    Vue.component("component-click",{
        template:`<button @click="$emit('vue-hello')">点击触发hello方法</button>`
    });
    var mv= new Vue({
        el:"#app",
        data:{
            message:"hello",
        },
        methods:{
            hello:function () {
             alert("hello");
            }
        }
    });
</script>
</html>
测试结果：

 

posted @ 2022-07-07 09:30  zcz666  阅读(1244)  评论(0)    收藏  举报