html 父模板,详解vue父子模版嵌套案例

这里是父子模版的调用

这里是针对于vue1.0，如果要学2.0，建议大家去看官方文档

第一种，子组件模版直接写在js里

//定义模版挂载点my-component

var Component = Vue.extend({// 定义

template: '

A custom component!

',

data: function () {

return {

name: 'yuxie'

}

}

});

Vue.component('com-ponent', Component);// 注册

//注意，extend(json) 和 vue.component('com-ponent', json)//这两个JSON是相等的。

//所以下面第二种会将extend()函数省略掉，直接在component中定义，系统会自动调用extend函数。

var conp = new Vue({// 创建根实例

el: '#exampleBox1'

});

第二种，使用HTML模版

{{parent.name}}

{{text}}

Vue.component('children', {//child是模版挂载的标签名

template: '#child-template',//id对应子组件的ID

data: function () {

return {

text: '这里是子组件的内容'

}

}

});

var parent = new Vue({// 初始化父组件

el: '#exampleBox2',

data: {

parent: {

name:'这里是父组件的内容'

}

}

})

第三种、来一个复杂的

复用一次

复用二次

···

···

//定义子组件，子组件必须在父组件之前定义。

var Child = Vue.extend({template: '

A child component!

'});

//定义父组件

var Parent = Vue.extend({

template: '

Parent父模版内部

',

components: {

// 调用子组件

'child-component': Child

}

});

// 注册父组件

Vue.component('my-component', Parent);

//复用子组件。

Vue.component('child', Child);

// 创建根实例，所有组件都需要在根实例之前创建。

new Vue({

el: '#example'

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。