https://jsfiddle.net/mmx38qxw...
运行不通过
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<bb-son v-model="value"></bb-son>
</div>script 放在 template 中运行错误
var Main = {
components: {
'bb-son': {
template: `
<input v-model="value" :style="style1">
</input>
<script>
export default {
props: {
value: {
required: false
}
},
data () {
},
computed: {
style1: function () {
let result = 'width: 2em;'
if (!this.value) {
result = result + ' color: #0066CC;'
} else {
result = result + ' color: #EA0000;'
}
return result
}
}
}
</script>
`,
props: {
value: {
}
},
data () {
return {}
},
mounted: function () {
console.info('son mounted, name is,', this.value.name)
},
updated: function () {
console.info('son updated, name is,', this.value.name)
}
}
},
data () {
return {
valuef: {
name: 'valuef'
}
}
},
methods: {
showConsole: function () {
console.info('current father name is, ', this.father.name)
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
在 Vue.js 中，使用 .components API 注册组件时，JavaScript 应该放在组件文件中。组件文件是 JavaScript 代码，通常包含 UI 界面逻辑和数据绑定等代码。
组件文件可以是一个单一文件，也可以是一个包含多个组件的目录。常见的组件文件格式包括 Vue CLI 配置文件、自定义 Vue 组件文件和全局样式文件等。
例如，一个简单的 Vue 组件文件可能如下所示：
```html
Hello, World!
```
在这个例子中，我们创建了一个名为 HelloWorld 的 Vue 组件，它有一个名为 message 的属性，可以接收字符串类型的值。
将这个组件文件保存在 src/components 目录下，然后在需要使用它的其他组件文件中引入它，如：
```html
```
这样，当我们在其他组件中使用 HelloWorld 组件时，JavaScript 文件会自动编译并运行，而组件的 UI 界面逻辑和数据绑定等代码会自动绑定到 message 属性上。
