VUE03_组件化思想、全局|局部注册、组件之间传值(父传子、子传父、兄弟传兄弟)、匿名|具名|作用域插槽（二）

2022-01-07 140

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ③. 局部注册④. 父组件向子组件传值

③. 局部注册

①. 只能在当前注册它的vue实例中使用

②. 注意:局部注册的组件、指令、过滤器等、都只能在父组件(它的实例)中使用

③. 代码展示

 <div id="app">
        <hello-word></hello-word>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    /*
    局部组件(局部组件只能在注册他的父组件中使用)
    */
    var  HelloWorld={
        data:function(){
            return{
               msg:'xiaozhi'
            }
        },
        template:'<div>{{msg}}</div>'
    };
    var vm=new Vue({
            el:'#app',
            data:{    
            },
            components:{
                'hello-word':HelloWorld
            }
    });
    </script>
</body>
</html>

import ComponentA from './ComponentA.vue'
export default {
  components: {
    ComponentA
  },
  // ...
}

④. 父组件向子组件传值

①. 父组件发送的形式是以属性的形式绑定值到子组件身上

②. 然后子组件用属性props接收

③. 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

④. 数值与布尔值要通过v-bind动态获取、否则静态的是字符串

<body>
    <div id="app">
        <!-- 注意:p-number 和 p-boolean 如果前面不加v-bind绑定的话,类型是字符串类型 -->
        <menu-titile :pstring='pString' :pnumber='2' :pboolean=true :pfriut='pFruit' :pobject='pObject'></menu-titile>
    </div>
    <script src="../js/vue.js"></script>
    <script>
    Vue.component('menu-titile',{
        props:['pstring','pnumber','pboolean','pfriut','pobject'],
        template:`
        <div>
        <div>{{pstring}}</div>
        <div>{{typeof pnumber}}</div>
        <div>{{typeof pboolean}}</div>
        <ul>
            <li :key="index" v-for="(item,index) in pfriut">{{item}}</li>
        </ul>
        <ul>
            <li :key="index" v-for="(value,key,index) in pobject">{{key+"----"+value+"-----"+index}}</li>
        </ul>
        </div>
        `
    });    
    var vm=new Vue({
            el:'#app',
            data:{    
               pString:'xiaozhi',
               pFruit:['香蕉','葡萄','苹果'],
               pObject:{"name":"xiaozhi","age":24,"gender":"male"}
            }
    });
    </script>
</body>
</html>

VUE03_组件化思想、全局|局部注册、组件之间传值(父传子、子传父、兄弟传兄弟)、匿名|具名|作用域插槽（二）

③. 局部注册

④. 父组件向子组件传值

热门文章

最新文章

相关课程

相关电子书