<div id="app">
    <!--<root> 隐性的根组件,相对于注册的全局组件child来说,是父组件-->
    <child msg="hello world"></child><!--child相对root来说是子组件,而 msg 这个变量是存在于父组件内的,应该属于父组件里的数据,虽然这个变量不是初始化就定义了的-->
    <!--</root>-->
</div>
<script>
    //注册一个全局组件,组件标签名为component
    Vue.component('child', {
        //组件构造器,此为一个对象,其中内容为多选项
        props: ['msg'],//接收父组件传递的数据
        template: '<span>{{msg}}</span>',
        data(){return {val: 2};}, //这才是子组件里面的数据
    });
    //实例化Vue
    new Vue({
        el : '#app',
        data : {val : 1}, //这个数据是初始化Vue实例就定义的
    });
</script>
Logo

前往低代码交流专区

更多推荐