vue component为什么官网的自定义组件不显示及各种自定义组件写法?

       基于Vue2的官网。   

官网这样写的不显示:因为你还没有一个vue实例对象,也就是主模板,也没有挂载到文档中。因为没有新建Vue对象,浏览器并不会自动识别Vue对象里有的方法,所以要new一个。el就是相当于Js中的element

	<ol id="todoItem1">
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>
        </ol>
        <ol id="todoItem">
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>
        </ol>
        <script>
            //定义todo-item组件
            Vue.component('todo-item', {
                template: '<li>这是个待办事项</li>'
            });

            //定义模板后,必须实例化,不然是不显示的。
            var vm = new Vue({
                el: '#todoItem1'
            });
            new Vue({
                el: '#todoItem'
            });
        </script>

二:下面的写法也是可以的

<div id='app21'>
             <v-header></v-header>
        </div>
        <script type="text/javascript">
            Vue.component('vHeader', {
                template: '<div>A custom component!</div>'
            });
            new Vue({
                el:'#app21',
            });
        </script>

三:另外一种写法

	<div id="component1">
            <h1>这里是另外一个模板测试</h1>
           <global-component></global-component>   <!-- 这里也插入了这个组件,全局注册的组件可以在所有晚于该组件注册语句构造的 Vue 实例中使用 -->
        </div> 
        <div id="component2">
            <h1>这里是模板测试</h1>
            <global-component></global-component>  <!-- 使用自定义标签在 Vue.js 模板中插入组件,编译时,这部分内容会被替换为组件的内容 -->
        </div>
        
        <template id="global-template">  <!-- 此 DOM 元素的 innerHTML 作为全局注册组件的模板 -->
            <div>
                组件内部 msg 文本内容为 {{msg}},和父组件无关!不信改改看:<!-- 和普通 Vue.js 模板一样,可以进行插值 -->
                <input type="text" v-model="msg" />  <!-- 和普通 Vue.js 模板一样,也可以进行表单数据绑定 -->
            </div>
        </template>
        <script type="text/javascript">
            Vue.component("global-component",{ //使用语法糖(只使用扩展实例选项)全局注册组件
                data: function(){ //Vue 扩展实例构造器的 data 选项,必须是一个工厂函数,返回数据对象
                    return {
                        msg: 'Hi, Vue.js'
                    }
                },
                template: "#global-template"  //template 是模板,可以是包含 HTML 代码的字符串,也可以是 # + id,如果是 # + id,则会使用该选择子匹配的 DOM 元素的 innerHTML 作为模板
            });
             new Vue({
                el: "#component1"
             }); 
             new Vue({
                el: "#component2"
             });
        </script>



  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一款流行的前端框架,它支持自定义组件,并提供了v-model指令来实现双向数据绑定。同时,Vue也提供了多种方式来实现父子组件之间的同步通信。 对于自定义组件的v-model双向绑定来说,最简单的方法就是在子组件的props中定义一个value属性,并将其绑定到父组件中的data中的属性。然后,子组件中通过$emit('input', value)触发一个input事件来改变父组件的数据。例如: 父组件: ```vue <template> <div> <custom-input v-model="message"></custom-input> </div> </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { message: 'Hello world!' }; } }; </script> ``` 子组件: ```vue <template> <div> <input :value="value" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { props: { value: { type: String, required: true } } }; </script> ``` 除了上述方式外,还可以通过自定义指令、混入等方式来实现自定义组件的v-model双向绑定。 对于父子组件之间的同步通信,Vue提供了多种方式来实现,例如: 1. props和$emit 在父组件中通过props将数据传递给子组件,在子组件中通过$emit触发一个事件并将数据传递回父组件。例如: 父组件: ```vue <template> <div> <child-component :message="message" @update-message="updateMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello world!' }; }, methods: { updateMessage(value) { this.message = value; } } }; </script> ``` 子组件: ```vue <template> <div> <input :value="message" @input="updateMessage($event.target.value)"> </div> </template> <script> export default { props: { message: { type: String, required: true } }, methods: { updateMessage(value) { this.$emit('update-message', value); } } }; </script> ``` 2. $parent和$children 在父组件中通过$children获取所有子组件,然后通过$parent获取父组件,从而实现父子组件之间的通信。例如: 父组件: ```vue <template> <div> <child-component></child-component> <button @click="sendMessage">Send message to child</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { sendMessage() { this.$children[0].sendMessage('Hello child'); } } }; </script> ``` 子组件: ```vue <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: '' }; }, methods: { sendMessage(value) { this.message = value; } } }; </script> ``` 除了上述方式外,还可以通过$refs、事件总线、Vuex等方式来实现父子组件之间的同步通信。需要根据具体的场景来选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值